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

2014/05/26

by sayo

Tag :

arrow

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

以上で完了です!

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

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

関連するコンテンツ

コメント

コメントを残す

気になる単語をサイト内検索できます

この記事と同じカテゴリ: css

>> 記事一覧を見る(TOPページ)