CSSアニメーション

2025/08/30

＜花が落下＞

上から花が落ちてきます。

＜バーが流れる＞

左から右へ流れるシンプルなバーアニメーション

＜フェードイン＞

文字や文章が徐々に透明から見える状態へと変化して現れる

＜スライドイン＞

文字や文章が画面の外からスライドしながら現れる

＜拡大・縮小＞

文字や文章がサイズを大きくしたり小さくしたりしながら変化し、色も変わる

＜バウンド＞

文字や文章が跳ねるような動き（bounce）をする

＜回転テキスト＞

1 2
3 4
1
2
3
4
回転テキストアニメーション

ボタンを押すと、いろいろな定番のCSSアニメーションが表示されます。 フラットデザインに動きを加える手法としてCSSアニメーションは便利ですが、当サイトではあまり使用する機会がありませんので、このページで使用しました。

前ページの「花がふわふわ降ってくる」はChatGPTが手伝ってくれたもの。このページの「花が落下」はChatGPTのコードを元にGeminiが再編集しました。