コニファ・ロゴ

csstest:Web Animation APIを使った歯車アイコンアニメーション

「Web Animation API」とは、これまでのCSSのTransitionsやSVGを使ったアニメーションをJavaScriptでおこなうためのAPIで、アニメーションの統一的なインターフェースを目指して仕様の策定が進められたいます。CSSのみで作るアニメーションと比べて実行時の制御が容易になります。

サンプルは、3つのサイズの違う歯車が回転するアニメーションで、「Settings」のボタンで回転を止めたり、スライダーにより回転速度を変更することができます。

 

Settings

 

 

戻るボタン