CSS3アニメーションで「ここをクリック」無限アピール矢印【デモあり】animationイベントなし

webサイトでよくある「ココをクリックしてね」的なことをアピールする無限アニメーションです。

css3に対応しているブラウザでしか動きません。

デモはこちら↓

実装方法は次のようになります。

CSS3なので特に必要なファイルなどはありません。

HTMLを書く

必要な画像を置くだけです

<div>
    <img src="arrow.png" class="arrow">
</div>

CSS3を書く

アニメーションをCSS3で書きます。

@arrow_ANIMEという名前でアニメーションの動作を定義し、
.arrowで呼び出すだけです。

4秒間でease（前後が自然にゆっくり）の動作でinfinite（無限）に動くようにしています。

.arrow{
    /*ベンダープレフィックス：アニメ名を呼び出す,4秒間で,easeの動作で,遅らせなしで,無限に*/
    -webkit-animation : arrow_ANIME 4s ease 0 infinite;
    -moz-animation   : arrow_ANIME 4s ease 0 infinite;
    -o-animation     : arrow_ANIME 4s ease 0 infinite;
    -ms-animation    : arrow_ANIME 4s ease 0 infinite;
    position:relative;
    top:0px;
}
@-webkit-keyframes arrow_ANIME{
    0%{ top:0px; }
 
    80%{ top: 0px; }
    86%{ top:10px; }
    90%{ top: 0px; }
    96%{ top:10px; }
 
    100%{ top: 0px; }
}
 
@-moz-keyframes arrow_ANIME {
    0%{ top:0px; }
 
    80%{ top: 0px; }
    86%{ top:10px; }
    90%{ top: 0px; }
    96%{ top:10px; }
 
    100%{ top: 0px; }
}
@-webkit-keyframes arrow_ANIME {
    0%{ top:0px; }
 
    80%{ top: 0px; }
    86%{ top:10px; }
    90%{ top: 0px; }
    96%{ top:10px; }
 
    100%{ top: 0px; }
}
@-o-keyframes arrow_ANIME {
    0%{ top:0px; }
 
    80%{ top: 0px; }
    86%{ top:10px; }
    90%{ top: 0px; }
    96%{ top:10px; }
 
    100%{ top: 0px; }
}
@keyframes arrow_ANIME {
    0%{ top:0px; }
 
    80%{ top: 0px; }
    86%{ top:10px; }
    90%{ top: 0px; }
    96%{ top:10px; }
 
    100%{ top: 0px; }
}