Animate.cssをつかってみた
「Animate.css」というcssアニメーションライブラリがとっても便利だったのでメモです。
ざっくりいうと、動きをつけたいものにクラスを指定するだけで、カンタンにCSSアニメーションをつけることができます。
使い方
1. Animate.cssの「Download Animate.css」からファイルをダウンロード。
2. ダウンロードしたanimate.cssをHTMLに読み込ませます
（例）
<!DOCTYPE html> <head> <link rel="stylesheet" href="animate.css"> </head> <body> <p>これをアニメーションさせる</p> </body> </html>
3. アニメーションさせたい要素にクラスをつけます
<p class="animated bounce infinite">これをアニメーションさせる</p>
（animatedは必須で、bounceが動きの種類、ループさせたいときはinfiniteクラスをつけます）
<p>タグや<div>タグなどにつければボックスが動いて、
<img>タグにつければ画像自体が変形します。
動きの種類
bounceflashpulserubberBandshakeheadShakeswingtadawobblejellobounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflipInXflipInYflipOutXflipOutYlightSpeedInlightSpeedOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRighthingerollInrollOutzoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUpslideInDownslideInLeftslideInRightslideInUpslideOutDownslideOutLeftslideOutRightslideOutUp
もっと絶妙にアニメーションを調整したい場合は
