ウェブサイトのリッチな表現に欠かせないアニメーション。実装にはCSSを使ったものからJavaScriptを使ったもの、WebGLを使ったものまでありますが、今回はTween24.jsを使ったウェブ制作の場面で使える実践的表現を紹介します。 基本的な導入方法や使い方は記事『新感覚!メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました』をご覧ください。 CSSアニメーションとの違い CSSのtransitionプロパティや@keyframesを使ったアニメーションなどがあります。これらは比較的手軽にアニメーションを実装できるのがメリットです。手軽さとは引き換えに複雑なアニメーションや動的に変数が変わるようなアニメーションが苦手です。一方でJavaScriptを使った手法は、複雑なものや動的なアニメーションも実装できるメリットがありますが、CSSと比べると記述量も
![マイクロインタラクションからクリエイティブ表現まで!Tween24.jsを使った演出表現 - ICS MEDIA](https://cdn-ak-scissors.b.st-hatena.com/image/square/1da166f31519ad5dfe2cfab5e4524e104490fc4b/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F211209%2Fimages%2Feyecatch.png)