CSS と Bootstrap アイコンを使用して、上下にジャンプするインジケーター矢印のアニメーション効果を作成します。

<a href="#" class="スクロールダウン">
  <span> <i class="glyphicon glyphicon-chevron-down"></i> </span>
</a>

/*スライドダウンアニメーション効果*/
@-webkit-keyframes ドロップ {
  0% { 上:0px; 不透明度: 0;}
  30% { 上:10px; 不透明度: 1;}
  100% { 上:25px; 不透明度: 0;}
}
@keyframes ドロップ {
  0% { 上:0px; 不透明度: 0;}
  30% { 上:10px; 不透明度: 1;}
  100% { 上:25px; 不透明度: 0;}
}
/*アニメーションを適用し、ボタン効果を追加します*/
.スクロールダウン{
    境界線: 2px 実線 #bbb;
    境界線の半径: 50%;
    マージン: 0 自動;
    高さ: 50px;
    幅: 50px;
    表示: ブロック;
    テキスト配置: 中央;
    zインデックス: 10;
    -webkit-transition: すべて 0.125 秒、ease-in-out 0 秒;
    -moz-transition: すべて 0.125 秒、ease-in-out 0 秒;
    -ms-transition: すべて 0.125 秒、ease-in-out 0 秒;
    -o-transition: すべて 0.125 秒、ease-in-out 0 秒;
    遷移: すべて 0.125 秒、ease-in-out 0 秒;
}
.スクロールダウンスパン{
    位置: 相対的;
    色: #bbb;
    フォントサイズ: 24px;
    -webkit-アニメーション名: ドロップ;
    -webkit アニメーション期間: 1 秒;
    -webkit-アニメーションタイミング関数: linear;
    -webkit-アニメーション遅延: 0秒;
    -webkit-アニメーションの反復回数: 無限;
    -webkit-アニメーション再生状態: 実行中;
    アニメーション名: ドロップ;
    アニメーション期間: 1秒;
    アニメーションタイミング関数: linear;
    アニメーション遅延: 0秒;
    アニメーションの反復回数: 無限;
    アニメーション再生状態: 実行中;
}