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サイトのトップ修正では、メインイメージとメニューの表示にこのアニメーションを入れることで、不動のコピーと無料登録フォームが際立つようにしています。
