みなさんは、CSSアニメーションどのように使っていますか? ウェブサイトのちょっとした演出でCSSトランジションを使用している方が多いと思いますが、類似のCSSアニメーションはどういった使い道があるのかよくわかっていない方も多いのではないでしょうか。実は、CSSアニメーションを使うとキャラクターアニメーションを作ることができます。 今回はシンプルな変形アニメーションを組み合わせて、1枚の画像で実現できるキャラクターアニメーションを制作しました。オリジナルのキャラクターをアニメーションさせていますが、CSSのコードのコピー&ペーストで他のキャラクター(画像)にも簡単に適応できます。 商用・個人問わず無料で利用できるMITライセンスで公開していますので、ウェブサイトやコンテンツ制作に是非ご活用ください。 伸びるアニメーション 上方向に「ぷるんっ」と伸びるアニメーションです。scale()でタイ
![コピペで使える! CSS Animationだけで実現するキャラクターアニメーション - ICS MEDIA](https://cdn-ak-scissors.b.st-hatena.com/image/square/a97a1a9f34d8c876ccb88f0fa88309fc35e1cf91/height=288;version=1;width=512/https%3A%2F%2Fics.media%2Fentry%2F11336%2Fimages%2Feyecatch.png)