タイ研修いってきました
2021.05.20

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

  • このエントリーをはてなブックマークに追加

こんにちは!

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

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

回転


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

フェードイン


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

横に流れる


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

徐々に現れる


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

色が変わる


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

最後に

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

第一回の記事はコチラ↓

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

この記事を書いた人

なかしなかし

レジットのコーダー。趣味は旅行と料理と商店街散策です。

小規模持続化補助金

WEB制作WEB制作

BLOGBLOG

売れてるサイトはこんなに違う
あなたを求む。
  • RSSを登録する
  • Google+ Google+をフォロー

ランキングランキング

制作実績制作実績

企業の顔つくります。
売れてるサイトはこんなに違う。
売れてるサイトはこんなに違う。
イキツケ制作所
小規模持続化補助金