本日2件のお問い合わせがありました。

✉️FIELDにお問い合わせ

デザイン・フロントエンド

CSSだけで実現するさまざまな効果アニメーションをリストにしてみました

背景色がゆっくり変わる

背景色がゆっくり変わります

背景色が繰り返し虹色に変わる

虹色に繰り返し変わる背景

水面のような波の揺らぎ(シンプルなCSS波形アニメーション)

ページスクロールに合わせてゆっくりフェードイン(スクロール連動はJSが必要ですが、擬似的に)

ふわっと現れるテキスト

横スライド(カルーセル風)

スライド1
スライド2
スライド3

マウスオーバーで拡大・色変化

ローディングスピナー(回転)

フェードイン・フェードアウト(繰り返し)

点滅するテキスト

回転アニメーション

回る

カードめくり効果(3D回転)

背景色ゆっくり変化(ホバー)

背景色ゆっくり変化

背景色が虹色にループ変化

虹色背景アニメ

水面の揺らぎ(グラデーション背景)

フェードイン・アップ(擬似的なスクロール演出)

ふわっと上からフェードイン

横スライドカルーセル(自動スライド)

スライド1
スライド2
スライド3

ボタンホバーで拡大&色変化

ローディングスピナー回転

テキスト点滅フェードイン・アウト

点滅テキスト

ボックス回転アニメーション

回転

3Dカードめくり

テキストタイピング風(文字幅を増やす)

Typing animation

拡大縮小(Pulseアニメ)

Pulse Animation

ボタン押し込み(押された感)

ドロップダウンメニューのスライドダウン

テキストアンダーライン伸びる(ホバー)

ホバーで下線が伸びる

シャドウ&グロー(ホバー)

揺れるアニメーション(横にゆらゆら)

ゆらゆら揺れる

ドットが跳ねるローディング

...

プログレスバー(幅が伸びる)

影が段々大きくなるホバー

ホバーで影が大きくなる

ぼかしが消えるホバー

ぼかしホバー

縦にスライドイン

縦スライドイン

文字色がグラデーションで流れる

グラデーション文字

スクロールバーに色をつける(見た目カスタム)

長い文章がここに入ります。
たくさん入れてスクロールバーを表示させます。
いろいろ書いてみてください。

ボタンの波紋エフェクト(CSSのみ)

要素が跳ねる(Bounce)

跳ねる

くるくる回転しながら拡大縮小

Spin & Scale

影が斜めに動く

影が動く

文字が左右に揺れる(Wave)

波のように揺れる文字

くるくる回る3Dキューブ風

3D Cube

Yamamoto Yuya

プロフェッショナルとしての高いスキルと知識を持ち、誠実さと責任感を大切にする。常に向上心を持ち、新たな挑戦にも積極的に取り組む努力家。