Web Animations APIを活用しよう

Web Animations APIをうまく使えば、オンボーディングしやすいマイクロインタラクティブアニメーションも実装しやすくなります。

stripe.gif

例えば、決済プラットフォームのStripeでは、Web Animations APIを大いに使ってぬるぬると動くUIアニメーションを実装しています。
Web Animations APIでは、CSSでもサポートしているようなeasing処理をそのまま使うことができるため、非常に便利です。
Stripeの例では、cubic-bezierというeasingを使って、フォームが入力後にスライディングするようなアニメーションになっています。

まとめ

Web Animations APIの登場により、たくさん乱立していた膨大な量のJavaScriptプラグインの中から一つを選んでダウンロードし、そのプラグインのことを勉強してアニメーションを作成するということがなくなり、ますますアニメーションを使った開発が行いやすくなります。
また、Web Animations APIはいま注目を集めているSVGを使ったアニメーションもサポートしているため、学ぶ価値は大いにあります。

今回は基本事項しか解説をすることはできませんでしたが、より詳しく知りたい方は、下記の参考ページを合わせてご覧ください。

参考：
Web Animations APIの基本的な使い方・まとめ