Verwenden Sie CSS- und Bootstrap-Symbole, um einen auf und ab springenden Indikatorpfeil-Animationseffekt zu erstellen

<a href="#" class="scroll-down">
  <span> <i class="glyphicon glyphicon-chevron-down"></i> </span>
</a>

/*Animationseffekt nach unten schieben*/
@-webkit-keyframes fallen lassen {
  0 % { oben: 0px; Deckkraft: 0;}
  30 % { oben: 10px; Deckkraft: 1;}
  100 % { oben: 25px; Deckkraft: 0;}
}
@keyframes fallen lassen {
  0 % { oben: 0px; Deckkraft: 0;}
  30 % { oben: 10px; Deckkraft: 1;}
  100 % { oben: 25px; Deckkraft: 0;}
}
/*Animation anwenden und Schaltflächeneffekte hinzufügen*/
.nach unten scrollen {
    Rand: 2px durchgezogen #bbb;
    Randradius: 50 %;
    Rand: 0 automatisch;
    Höhe: 50px;
    Breite: 50px;
    Anzeige: Block;
    Textausrichtung: zentriert;
    Z-Index: 10;
    -webkit-transition: alle 0,125 s, Ein- und Ausstieg 0 s;
    -moz-transition: alle 0,125 s Ein- und Ausstieg 0 s;
    -ms-Übergang: alle 0,125 s, Ein- und Ausstieg 0 s;
    -o-Übergang: alle 0,125 s, Ein- und Ausstieg 0 s;
    Übergang: alle 0,125 s, Ein- und Ausstieg 0 s;
}
.scroll-down span {
    Position: relativ;
    Farbe: #bbb;
    Schriftgröße: 24px;
    -Webkit-Animationsname: fallen lassen;
    -Webkit-Animationsdauer: 1 s;
    -WebKit-Animation-Timing-Funktion: linear;
    -Webkit-Animationsverzögerung: 0 s;
    -webkit-animation-iteration-count: unendlich;
    -webkit-animation-play-state: läuft;
    Animationsname: Drop;
    Animationsdauer: 1 s;
    Animations-Timing-Funktion: linear;
    Animationsverzögerung: 0 s;
    Anzahl der Animationsiterationen: unendlich;
    Animations-Wiedergabestatus: läuft;
}