【コピペOK！】第二回 CSSだけで動くアニメーション５選

こんにちは！

今月でいつの間にやらレジットに入って1年経っていた、なかしです。
入社してから定期的にブログ記事を投稿していますが、入社当時に比べて学んだことも多く、ご紹介できる内容も増えてきたので嬉しく思います。

私の記事の中で一番PV数の多いものが、cssだけで作るアニメーションを紹介したこちらの記事なのですが、今回はその第二段をやっていきたいと思います。

回転

こちらはtransformプロパティのrotateを使用し、星に回転する動きをつけてみました。
infinityを使用しているので、くるくると連続で回転し続けます。

フェードイン

こちらは様々な場所でよく見かけるフェードイン。
0%時点のtranslateYは縦方向の位置になり、値を負の数にすることで上からフェードインするアニメーションも表現することができます。

横に流れる

次は横に流れていくアニメーションです。
translateXは横方向の位置を指定できるプロパティで、infinityとあわせてサイト内で画像やお知らせ用のテキストを自動でループさせたい時などに活用できるかと思います。

徐々に現れる

こちらは、徐々にコンテンツが現れるアニメーション。
『opacity』は0から1までの数値で、要素の不透明度を指定することができます。

色が変わる

最後は色が徐々に変化していくアニメーションです。
0%、50%、100%とざっくりと色を指定しただけでも、
間を補完してグラデーションしてくれます。変化する色のパターンを増やしたい場合は、経過地点を細かく設定してみてください。

最後に

いかがでしたでしょうか？ これからもcssアニメーション系の記事は定期的にアップしていきたいので、段々レベルアップした動きも紹介できたらと思います！

第一回の記事はコチラ↓

【コピペOK！】CSSだけで動くアニメーション５選