Animate.cssを利用して簡単にアニメーションを導入する

harada 1,884views 更新:2014年2月20日

Animate.cssを利用することで、簡単にアニメーションを設定できます。

利用方法

あらかじめanimate.cssをサイトからダウンロードし、<head>内で読み込んでおきます。
あとはアニメーションしたい要素のclassに「animated」と、animate.cssであらかじめ設定されているアニメーションのクラス名を設定するだけです。

あわせて、アニメーションの早さや、表示のタイミングも設定したい場合は以下のようにスタイルを設定します。

<div class="animated fadeIn" style="-webkit-animation-duration: .7s;  -moz-animation-duration: .7s;  animation-duration: .7s;  -webkit-animation-delay: 1.1s;  -moz-animation-delay: 1.1s;  animation-delay: 1.1s;">
アニメーションしたい要素
</div>

昨日実施したAipo.comサイトのトップ修正では、メインイメージとメニューの表示にこのアニメーションを入れることで、不動のコピーと無料登録フォームが際立つようにしています。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません