こんにちは、けーすけです！
福岡は連日の真夏日でうだるような暑さが続いています。水分補給をしっかりと行いましょう！
さてそんな私はクーラーの効いた部屋で勉強のために、CSSアニメーションを夢中で作っていたので、今回はそちらを紹介したいと思います。

何かの参考になれば幸いです。

ネオン管っぽいエフェクト

こちらのCodePenを参考にしたCSSアニメーションです。
CSS animated Neon Sign

実際にマネしながら作ってみました。作ったものがこちら。

[codepen_embed height=”240″ theme_id=”0″ slug_hash=”BZgpRJ” default_tab=”result” user=”Chankei”]See the Pen NEON type by Chankei (@Chankei) on CodePen.[/codepen_embed]

おもったより難しかったです。。。ネオンっぽくなるように値を調整したり、ピカピカっとネオン管ならではの切れそうな感じもアニメーションの間隔を色々試してみたりしました。結局参考のCodePenを同じようになりましたが、かなり勉強になりました。

虫食い文字のようなアニメーション

[codepen_embed height=”257″ theme_id=”0″ slug_hash=”gRErPW” default_tab=”result” user=”Chankei”]See the Pen depth typegraphy animation by Chankei (@Chankei) on CodePen.[/codepen_embed]

こちらは、どこかのサイトで見たものをつくってみました。( 確かferretの記事で紹介されていたような、、、 )
どうすれば絵の前後に文字を置けるのか結構考えるのに時間がかかりました。

今回のものはパッとつくったのであれですが、フォントと画像にこだわるととっても素敵なビジュアルができそうですね！今度凝ったものも作ってみようとおもいます。

グリッチエフェクトを目指してつくった

こちらのCodePenを参考にしたCSSアニメーションです。
CSS-Only Glitch Effect

こちらも実際にマネしながら作って見ました。そして完成したのがこちら

[codepen_embed height=”224″ theme_id=”0″ slug_hash=”ZydBYJ” default_tab=”result” user=”Chankei”]See the Pen buruburu type by Chankei (@Chankei) on CodePen.[/codepen_embed]

んー、なんだか参考にしたのよりグリッチ感がない、、、ただブルブルしてるだけになってしまったのですがこれはこれで良いかということで。

グリッチっぽくするには、もう少し細かい間隔と急に大きな変化を加えることが必要かなと思いました。そこまで調整する元気はすでになく。。。。。

おまけ | 初心者むけのcssアニメーション

今回しっかり作ったものを紹介しましたが、他にも簡単な動作を確認するためのアニメーションを作ってみたのでそちらもさらっと紹介します。

そちらがこれです。とっても簡単なcssアニメーションでボタンのホバーの動きを色々アニメーションさせています。
本当に簡単なので、まだcssアニメーションを触ったことがない！という方はこれからしてみると結構面白いと思います。

[codepen_embed height=”224″ theme_id=”0″ slug_hash=”MoxyKz” default_tab=”result” user=”Chankei”]See the Pen css button:hover animation by Chankei (@Chankei) on CodePen.[/codepen_embed]

まとめ

いかがでしたでしょうか？
個人的にアニメーションが好きなのでついCodePenで色々探してしまいます。

特にCSSアニメーションは、初心者でも簡単にできてアイデア次第でたくさんの表現ができます。
そして、今回の私のようにCodePenで見たものを実際に作ってみると理解が深まってとても勉強になるのでおすすめです。

その他にも私のCodePenには載っていますので、参考になればと思います

それでは今回はこの辺で、けーすけでした。