CSSアニメーション

コピペで動く CSS/SCSS アニメーション、テーマごとに9種

カードフリップアニメーション 9選【コピペ20行】

カードフリップアニメーションとは、マウスを乗せたりクリックしたりするとカードがくるっと回転したり半分に折れたりして、裏側の内容が現れる効果のことです。コードが分からなくても、下のデモにマウスを乗せてみれば何が起きているか一目で分かります

読む

css カルーセルスライダーとは、写真やカードを何枚か並べて画面の中で順番に切り替えて見せる部品のことです。指でめくったりボタンを押したりすると次の一枚が現れ、JavaScriptを書かなくてもCSSだけで動かせます。スクロールからラジオ

css リンク下線アニメーションとは、マウスを乗せたりキーボードで focus を移したときだけリンクの下線が動いて現れる効果のことで、今どのリンクを指しているかが一目でわかるようになります。9種類まとめて用意しました。どれも一行コピペ

トップへ戻るボタンとは、ページを下まで読んだあとにワンクリックで一番上へ戻してくれる小さなボタンのことです。この記事では「トップへ戻るボタン css」でよく探される9つの動きを、AOS・GSAPなしでそのまま使えるコードとしてまとめました。

リンクの矢印にマウスを乗せた瞬間にすっと伸びたり、ボタンの矢印が絶えずゆっくり跳ねたりする動きを見たことはありませんか。この記事はそうした矢印 css アニメーションを、一行でコピペOKなコード9個にまとめたものです。

ボタンやバッジが、ただ表示されるのではなくふわっと浮いたり、ぽよんと弾んだり、ぷるぷる震えたりする動きを見たことはありませんか。この記事はそんな「css アニメーションバウンス」の実例を、まんが的な擬音語(ふわふわ・ぽよん・ぷるぷるなど)

会員登録や決済が終わった瞬間、画面いっぱいに色とりどりの紙の破片が舞い散る演出を見たことはありませんか。あれは紙吹雪アニメーション cssと呼ばれるコードで作られていて、ボタンを押す、チェックを入れるといった操作一つで同じお祝いの動きを、

画面に半透明のすりガラス板を重ねたように、後ろの背景がぼんやり透けて見えるのに文字はくっきり読めるデザインを、CSS グラスモーフィズム(リキッドガラス)と呼びます。カードやナビゲーション、ボタンからトグルまで、9種類のガラス演出を一行でコ

ChatGPTやClaudeのようなAIチャットに質問を送ると、返事が来るまでの数秒間、小さな点が順番に光ったり、画面の文字がふわっと浮かび上がったりする瞬間を見たことはないでしょうか。この記事はその「考え中」の合図を作るローディングアニ

写真にマウスを乗せると覆っていた板がすっと開いたり、円がじわっと広がって中身が見えたりするサイトを見たことはありませんか。この記事はそうしたcss アニメーションギャラリーの動きを、一行でコピペできるコード9個にまとめたものです。うち1つ