トップ

CSS

80件のアニメーション

CSS Shimmer Text
光のシマーがテキスト上を横切るCSSのみのエフェクト。
CSS
Radar Sweep Loader
conic-gradientでレーダーのスイープ表示を再現したローダー。
CSS
Gradient Border Button
@propertyで回転角をアニメーションするconic-gradientボーダーボタン。
CSS
CSS Scroll Timeline Fade
CSS Scroll-driven Animationsでスクロールに連動してフェードインする。
CSS
CSS Mesh Gradient Card
複数のradial-gradientを重ねてメッシュグラデーションを動的に実現するカード。
CSS
Newton Cradle Loader
ニュートンのゆりかごをCSS transformで再現したフィジカルローダー。
CSS
Perspective Door Hover
ホバーでカードが3Dドアのように開くperspective+transform演出。
CSS
Mask Gradient Card
mask-imageのグラデーションがカード上を移動する光のスキャンエフェクト。
CSS
Karaoke Highlight Text
カラオケのようにテキストが左から順番にハイライトされていく。
CSS
Gradient Mask Text
アニメーションするグラデーションがテキストをマスクし、色が流れ続ける。
CSS
Glitch Scan Loader
スキャンラインが上下に走るグリッチ風ローダー。clip-pathで実現。
CSS
Conic Gradient Spinner
conic-gradientと@propertyで回転角度をアニメーションする高度なスピナー。
CSS
Clip Path Reveal Hover
clip-pathの円形マスクがホバーで中心から広がり全体を露出する。
CSS
Neon Pulse CTA
ネオンの脈動グローが呼吸のように光るCTAボタン。@propertyでグロー半径をアニメーション。
CSS
Tooltip Hover
ホバーで上に表示されるツールチップ。
CSS
Slide From Left
左からスライドインする入場アニメーション。
CSS
Blur Scroll Reveal
ぼかしが解除されながらフェードインするリビール。
CSS
Clip Path Reveal
clip-pathで切り取りながら現れるリビール。
CSS
User Avatar Card
アバター付きユーザープロフィールカード。
CSS
Gradient Mesh Card
メッシュグラデーションの美しい背景カード。
CSS Pro
Pricing Tier Card
ホバーでリフトアップするプライシングカード。
CSS
Notification Card
通知カードUIのアニメーション。スライドイン。
CSS
Feature Icon Card
アイコン付きフィーチャーカード。LP用。
CSS
Quote Card
引用符が浮かぶ洗練された引用カード。
CSS
Minimal Stat Card
ミニマルな数値表示カード。ダッシュボード用。
CSS
Scale In Heading
スケール+フェードで登場するヘッディング。
CSS
Fade Stagger Lines
複数行が時間差でフェードインするテキスト。
CSS
Wave Text
1文字ずつ波打つテキストアニメーション。
CSS
Highlight Marker
マーカーで塗られるようにハイライトされるテキスト。
CSS
Glitch Text
グリッチエフェクトのかかるサイバーなテキスト。
CSS Pro
Cascade Bars
バーが順番にカスケードするローダー。
CSS
Flip Coin Loader
コインが裏返るように回転するローダー。
CSS
Breathing Circle
呼吸するようにスケールするサークル。瞑想アプリ風。
CSS
Dot Grid Pulse
3x3ドットグリッドが波状にパルスする。
CSS Pro
Wave Line Loader
SVG風の波ラインが流れるローダー。
CSS
Bounce Dots
3つのドットが弾むローダー。軽快な印象。
CSS
Gradient Spinner
グラデーションが回転する美しいスピナー。
CSS Pro
Rotating Squares
2つの四角が交差しながら回転するローダー。
CSS Pro
Grow Underline
ホバーで中央から左右に広がるアンダーライン。
CSS
Image Zoom Container
ホバーで画像がズームしつつオーバーレイが現れる。
CSS
Dot Indicator Tabs
アクティブタブの下にドットが移動するタブナビ。
CSS
Slide Background Item
ホバーで背景色が左からスライドするリストアイテム。
CSS
Rotating Icon Hover
ホバーでアイコンが回転するメニューアイテム。
CSS
Clip Reveal Image
ホバーでclip-pathが広がり画像が現れる。
CSS Pro
Skew Card Hover
ホバーでわずかにスキューがかかるカード。
CSS
Color Wipe Link
ホバーでテキスト色が左から塗り替わるリンク。
CSS
Ghost Button Pulse
待機時にパルスで注目を集めるゴーストボタン。
CSS
Soft Shadow Button
押すとシャドウが消えて沈み込むボタン。触覚的。
CSS
Underline CTA
ミニマルなアンダーラインCTAリンク。記事内に。
CSS
Stretch Hover Button
ホバーで横に伸びるストレッチボタン。
CSS
Double Layer Button
二重レイヤーがずれてホバーで揃うボタン。
CSS
Arrow Slide Button
ホバーで矢印が右からスライドインするCTAボタン。
CSS
Neon Glow Button
ネオンサインのように光るボタン。暗い背景のLPに。
CSS
Liquid Fill Button
ホバーで液体が底から満たされるようなボタン。
CSS
Horizontal Scroll Section
横スクロールするカードセクション。ポートフォリオに。
CSS
Stacked Image Card
複数の層が微妙にずれて奥行きを表現するカード。
CSS Pro
Glow Border Card
ホバーでボーダーがソフトに光るグローカード。
CSS
Slide Reveal Card
ホバーで下部コンテンツがスライドアップするカード。
CSS
Flip Card
ホバーで裏面が表示される3Dフリップカード。
CSS Pro
Blur In Text
ぼかしから鮮明になるテキスト出現。ヘッダーに。
CSS
Gradient Flow Text
テキストにグラデーションが流れるシマーエフェクト。
CSS Pro
Progress Line
画面上部を走るインジケーター。ページ遷移に。
CSS
Morphing Dots
2つのドットが変形しながら接近・離散するローダー。
CSS Pro
Bar Wave Loader
5本のバーが波打つイコライザー風ローダー。
CSS
Orbit Spinner
軌道を回る2つのドット。APIレスポンス待ちに。
CSS
Border Trace Hover
ホバーでボーダーが一筆書きのように描かれるカード。
CSS
Stagger List Hover
ホバーで子要素が時間差でハイライトされるリスト。
CSS
Split Reveal Button
ホバーで上下にスプリットしてテキストが切り替わるボタン。
CSS
Elastic Press Button
押すとゴムのように弾むエラスティックボタン。
CSS
Outline Fill Button
ホバーでアウトラインから塗りに変化するボタン。
CSS
Gradient Shift Button
グラデーションが滑らかに移動するプレミアムボタン。
CSS Pro
Glassmorphism Card
フロストガラス風の半透明カード。モダンUI向け。
CSS Pro
Typewriter
タイプライター風テキスト表示。ヒーローセクションに。
CSS
Skeleton Loader
コンテンツ読み込み中に表示するスケルトンUI。
CSS
Dot Wave
3つのドットが波打つローディング。チャットUIの入力中表示に。
CSS
Pulse Ring
同心円がパルスする洗練ローディング。ダッシュボードに。
CSS
Scale + Fade Menu
ホバーでスケール＋フェードするメニューアイテム。
CSS
Underline Slide
ナビゲーションリンク用。左→右へスライドするアンダーライン。
CSS
Border Flow Button
ボーダーが流れるように光るボタン。SaaS LPに。
CSS Pro
Shimmer Button
光の反射が流れるシマーエフェクト。プレミアム感を演出。
CSS