ホバーやクリックした際の動きを中心に、CodePenで公開されているCSSを使ってちょっとしたエフェクトやアニメーションを付けたいときに参考になりそうなデモを紹介します。 いずれも目新しい感じのものではないのですがひと通りの動きがまとめられているデモが多めなので、エフェクトをどんな感じにするか悩むことが多い人はこういったものをメモしておくのがおすすめです。 CodePenで公開されているので実際の動きやコードを見るだけでなく、それらをベースに自分好みに変更して動きを確認したりも容易にできます。 また、例えばクライアントなどからアニメーションを付けたいというざっくりな要望があったときなどにも、こういったものを利用することで大体のイメージをお互い認識できたりするのに利用できそうですね。 紹介しているものはホバーやクリック時のエフェクトが主になるので確認はPC推奨です。 Stacked Card
![CodePenで公開されている、CSSでエフェクトやアニメーションを付けたいときに参考になるデモ 15 - NxWorld](https://cdn-ak-scissors.b.st-hatena.com/image/square/05d1b6eff085d56fd8b081c57d263cad613cfe1b/height=288;version=1;width=512/https%3A%2F%2Fwww.nxworld.net%2Fthumbnail%2F15-css-effect-and-animation-examples-from-codepen-201704.png)