今日は昨日Githubの人気レポジトリから発見した、CSSだけで実装できる愉快なテキストアニメーション集『Animate.css』の取説(README.md)を翻訳していきます。
ただしJQueryなど私が技術的にちゃんと理解していない部分は今回は訳さないでおきます。。そのうち分かったら補完するかも。
Animate.css
水を注ぐだけで出来るお手軽CSSアニメーション。
『Animate.css』はすぐにあなたのプロジェクトで使えるクールでワクワクする、そしてクロスブラウザなアニメーション集です。特に強調したい部分やトップページ、スライダー部分などに手軽に素晴らしい演出を加えるのを得意としています。
yarnを経由してインストールする。
animate.cssをあなたのウェブサイトで使う方法は簡単で、ドキュメントの<head>タグ内にそのスタイルシートを挿入し、動かしたい要素のクラス名に animated と指定したいアニメーションの名前を追加するだけです。これで終わり!あなたはもうCSSで動く要素を手に入れました、素晴らしい!
またはCDNJSからCDNを使ってインストールする場合。
要素にアニメーションを付けるために、まず animated というクラス名を付与します。動きを無限に繰り返すなら infinite というクラス名が使えます。そして最後に下記のクラス名から1つ、あなたが使いたいものを付けましょう。
Class Name | |||
---|---|---|---|
bounce |
flash |
pulse |
rubberBand |
shake |
headShake |
swing |
tada |
wobble |
jello |
bounceIn |
bounceInDown |
bounceInLeft |
bounceInRight |
bounceInUp |
bounceOut |
bounceOutDown |
bounceOutLeft |
bounceOutRight |
bounceOutUp |
fadeIn |
fadeInDown |
fadeInDownBig |
fadeInLeft |
fadeInLeftBig |
fadeInRight |
fadeInRightBig |
fadeInUp |
fadeInUpBig |
fadeOut |
fadeOutDown |
fadeOutDownBig |
fadeOutLeft |
fadeOutLeftBig |
fadeOutRight |
fadeOutRightBig |
fadeOutUp |
fadeOutUpBig |
flipInX |
flipInY |
flipOutX |
flipOutY |
lightSpeedIn |
lightSpeedOut |
rotateIn |
rotateInDownLeft |
rotateInDownRight |
rotateInUpLeft |
rotateInUpRight |
rotateOut |
rotateOutDownLeft |
rotateOutDownRight |
rotateOutUpLeft |
rotateOutUpRight |
hinge |
jackInTheBox |
rollIn |
rollOut |
zoomIn |
zoomInDown |
zoomInLeft |
zoomInRight |
zoomInUp |
zoomOut |
zoomOutDown |
zoomOutLeft |
zoomOutRight |
zoomOutUp |
slideInDown |
slideInLeft |
slideInRight |
slideInUp |
slideOutDown |
slideOutLeft |
slideOutRight |
slideOutUp |
heartBeat |
全要素使用例:
こちらで全アニメーションの動作を確認しましょう!
またアニメのduration(継続時間)、delay(開始の遅延)、繰り返しの回数などのプロパティも変更可能です。
※自分がJQueryよく分かってないのでここは省略します。
下記のように、ディレイを直接に要素のクラス属性として付与することも出来ます。
Class名 | Delay時間 |
---|---|
delay-2s |
2s |
delay-3s |
3s |
delay-4s |
4s |
delay-5s |
5s |
注:初期設定ではディレイは1~5秒の間のみです。もしそれ以外の数値をカスタムしたい場合はCSSへ直接指定してください。
下記のクラス名のどれかを追加することで、アニメーションのスピードも操作できます。
Class名 | アニメーション時間 |
---|---|
slow |
2s |
slower |
3s |
fast |
800ms |
faster |
500ms |
注: animated に指定されたデフォルトの時間は1sです。もしそれ以外の数値をカスタムしたい場合はCSSへ直接指定してください。
次にgulpを起動させてカスタムしたビルドをコンパイルしましょう。例えばあなたが「attention seekers」グループの中で何個かだけが必要だと思うなら、 animate-config.json ファイルから使いたいものだけを選んで編集するだけです。