こんにちは！
今月でいつの間にやらレジットに入って1年経っていた、なかしです。
入社してから定期的にブログ記事を投稿していますが、入社当時に比べて学んだことも多く、ご紹介できる内容も増えてきたので嬉しく思います。
私の記事の中で一番PV数の多いものが、cssだけで作るアニメーションを紹介したこちらの記事なのですが、今回はその第二段をやっていきたいと思います。
回転
こちらはtransformプロパティのrotateを使用し、星に回転する動きをつけてみました。
infinityを使用しているので、くるくると連続で回転し続けます。
フェードイン
こちらは様々な場所でよく見かけるフェードイン。
0%時点のtranslateYは縦方向の位置になり、値を負の数にすることで上からフェードインするアニメーションも表現することができます。
横に流れる
次は横に流れていくアニメーションです。
translateXは横方向の位置を指定できるプロパティで、infinityとあわせてサイト内で画像やお知らせ用のテキストを自動でループさせたい時などに活用できるかと思います。
徐々に現れる
こちらは、徐々にコンテンツが現れるアニメーション。
『opacity』は0から1までの数値で、要素の不透明度を指定することができます。
色が変わる
最後は色が徐々に変化していくアニメーションです。
0%、50%、100%とざっくりと色を指定しただけでも、
間を補完してグラデーションしてくれます。変化する色のパターンを増やしたい場合は、経過地点を細かく設定してみてください。
最後に
いかがでしたでしょうか？ これからもcssアニメーション系の記事は定期的にアップしていきたいので、段々レベルアップした動きも紹介できたらと思います！
第一回の記事はコチラ↓
この記事を書いた人
なかしなかし
レジットのコーダー。趣味は旅行と料理と商店街散策です。
WEB制作
ランキング
制作実績
