transition.css がアニメーションの実装に便利そう

たまたま argyleink/transition.css というアニメーションライブラリを見つけました。 これは便利そうです。 以下のようなアニメーションを、コピペで簡単に作れます (画像は公式より拝借)。

animate.css とよく似たライブラリですが、いくつか利点があります。

1. アニメーションを自由に作れる
2. 作ったアニメーションの CSS を部分的にコピーできる

(1) アニメーションの秒数や、開始・終了時のエフェクトを簡単に編集できます。 色々なものに適用しやすそうで、良い特徴だと思いました。

(2) 公式ページ で使いたいアニメーションの CSS だけコピーできます。 animate.css だと何も考えずに使おうとすると、ライブラリ全体を読み込まないといけないので利点です。 まあ animate.css も使うところだけ自分でコピペすれば良いので、慣れている人には関係ないかも知れませんが、楽さは重要です。

欠点としては、まだビルトインのアニメーションの数が少ないことでしょうか。 最近のナウいページで使われがちなアニメーションは網羅されていますが、 ゲームなどで面白い効果を出そうとするには、まだまだ不足している気はします。 animate.css のほうが使えそうなアニメーションが多いです。 ただ、いくらでも増やせる実装になっているので、これから増えていくと面白そうです。

今後に期待ですね。 ちなみに loadingio/transition.css というのもあって、これはこれで便利そう。 ただこちらは導入に少し手間が掛かる。