CSSアニメーションが使えるブラウザではCSSアニメーションを使い、それ以外ではanimate関数を使うといった場合にanimate関数と同じような使い方ができれば振り分けが容易になるので、これをプラグインにしてみました。
プラグインのベースはJavaScriptデザインパターンの軽量スタートパターンと、昔、公式にプラグイン作成方法として掲載されていたパターンを組み合わせたものです(こちらは個人的にずっと使っていたのですが出典の記憶が定かでない…)。この組み合わせにより要素ごとにプロパティを保持し、追加のメソッドも実行できるようにしました。
@keyframes
と@keyframes
を動作させるクラスを書き込んだstyleを動的に<head>
に追加し、これらのクラスを付与したり削除したりすることで動作します。
まだ勉強不足で動作のディテールがよくわかっていないのでもっと最適化できるのかも知れません。また見直したいと思っています。キューにスタックすることと'stop'
を使い分けられることが目標だったのでまずはおkかな。