ITエンジニア/デザイナ向けにオープンソースを毎日紹介

css-animations.jsはCSS3キーフレームアニメーションを制御するJavaScriptライブラリです。

CSS3にはキーフレームアニメーションがあります。簡単なアニメーションであればCSSだけで実現できます。そんなキーフレームアニメーションの動作を制御できるJavaScriptライブラリがcss-animations.jsです。


CSS3の@keyframesでアニメーションを制御しています。


JavaScriptでアニメーションを追加することもできます。


こちらはCSSなし、JavaScriptのみでキーフレームを作成しています。

CSS3だけで全てを行おうと思うと書き方が冗長的になったり、一つのDOMに一つのアニメーションしか付けられずに不便な思いをするかも知れません。JavaScriptと組み合わせることで他の入力状態などによって動きが制御できるようになるので、より利用できる幅が広がりそうです。

css-animations.jsはJavaScript製、BSD Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

CSSだけであってもチェックボックスを使うとcheckedになっている場合だけ制御を変えたりすることもできます。どこまでCSSだけでできるのか挑戦してみるのもそれはそれで面白いでしょう。とは言えそれは個人プロジェクトの場合です。

会社で取り組む場合は、よりメンテナンスしやすかったり開発しやすい形を模索する必要があります。何でもJavaScript、何でもスタイルシートではなく、その特性を見極めた上で最適な技術の組み合わせを模索する必要があるでしょう。

デモ1

デモ2

デモ3

jlongster/css-animations.js · GitHub

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2