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; }
}

以上で完了です！

ベンダープレフィックスも入れましたが、動作確認はしてません。

一応利用したファイルは以下のものです。

ダウンロード