今日は昨日Githubの人気レポジトリから発見した、CSSだけで実装できる愉快なテキストアニメーション集『Animate.css』の取説(README.md)を翻訳していきます。

ただしJQueryなど私が技術的にちゃんと理解していない部分は今回は訳さないでおきます。。そのうち分かったら補完するかも。

Animate.css

水を注ぐだけで出来るお手軽CSSアニメーション。

『Animate.css』はすぐにあなたのプロジェクトで使えるクールでワクワクする、そしてクロスブラウザなアニメーション集です。特に強調したい部分やトップページ、スライダー部分などに手軽に素晴らしい演出を加えるのを得意としています。

インストール方法

npmを経由してインストールする。

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での使用方法

※自分がJQueryよく分かってないのでここは省略します。

ディレイや再生スピードの設定方法

ディレイ・クラス

下記のように、ディレイを直接に要素のクラス属性として付与することも出来ます。

Class名	Delay時間
`delay-2s`	`2s`
`delay-3s`	`3s`
`delay-4s`	`4s`
`delay-5s`	`5s`

注：初期設定ではディレイは1～5秒の間のみです。もしそれ以外の数値をカスタムしたい場合はCSSへ直接指定してください。

Slow, Slower, Fast, and Fasterクラス

下記のクラス名のどれかを追加することで、アニメーションのスピードも操作できます。

Class名	アニメーション時間
`slow`	`2s`
`slower`	`3s`
`fast`	`800ms`
`faster`	`500ms`

注： animated に指定されたデフォルトの時間は1sです。もしそれ以外の数値をカスタムしたい場合はCSSへ直接指定してください。

ビルドのカスタム

Animate.cssはgulp.jsを使って運用されていて、それはつまりあなたが非常に簡単にビルドをカスタム出来るということです。まず初めに、Gulpとその付属品すべてをダウンロードする必要があります。

次にgulpを起動させてカスタムしたビルドをコンパイルしましょう。例えばあなたが「attention seekers」グループの中で何個かだけが必要だと思うなら、 animate-config.json ファイルから使いたいものだけを選んで編集するだけです。

アクセシビリティ

Animate.cssは prefers-reduced-motion メディアクエリに対応しているので、動きに対して過敏傾向のあるユーザーがアニメーション機能を差し止めることも出来ます。サポートしているプラットフォーム(現在はOSX SafariとiOS Safariのみ)では、ユーザーはOSの選択項目で”reduce motion”を選んでいれば、それ以上動画を動かすことなくCSSトランジションをオフにすることが出来ます。

ライセンス

Animate.cssのライセンスはMIT license(https://opensource.org/licenses/MIT) です。

協力

プルリクエストがその方法です。私たちはプルリクエストの受付に2つだけルールを設けています。１つは命名規則(キャメルケース、カテゴライズ『fades, bounces, etc』)を一致させること、もう一つは作ったアニメーションのデモをcodepenを使って私たちに見せてもらうことです。特に最後の一つが重要です。

Animate.css日本語訳

Animate.css

コメントを残すコメントをキャンセル

Animate.css

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル