ホバー

動作

一行でコピペOK ― CSS カードホバーアニメーション9選

css カードホバーとは、カード型のUIコンポーネントがマウスやフォーカスを受け取った瞬間だけ、浮く・光る・傾くといった短い変化を見せる仕掛けです。今回は9種類を選び、7つはCSSのtransformとtransitionだけで、残り2つ

読む

チャット吹き出し css のアニメーション9種類を、動いた状態のまま並べました。新着メッセージのポップ登場から入力中のドット、既読の切り替え、画像読み込み、返信引用、絵文字リアクション、日付区切り、新着メッセージの自動スクロールまでを実装

css 数字カウントアップは、0や開始値から目標の数字まで上がっていくテキストを、JavaScriptなしでCSSのカスタムプロパティだけで数える手法です。9つのうち1つは逆に0へ向かって減っていき、別の1つはスクロールして画面に入るまで

css 画像ホバーエフェクトは、写真の上にカーソルを乗せた瞬間だけ拡大・変色・出現が起きる、CSSのtransformとtransitionだけで組める小さな仕掛けです。この記事では9種類を選び、それぞれ6〜25行のコードとして実装しま

css 文字アニメーションは、JavaScriptを使わずCSSのtransform・opacity・filterだけで見出しや文言を動かす小さな演出です。この記事は9種類を選び、6〜25行のコードに絞って実装を確かめました。冒頭のグリッ

css タイピングアニメーションは、文字が一文字ずつ入力されていくように見せる、CSSだけで動く小さな部品です。この記事では9種類を選び、steps()とwidth、clip-pathという仕組みだけで実装しました。グリッドの9つはifr

カーソルエフェクト cssは、既定の矢印カーソルを消し、代わりの要素をtransformで動かして見せる、CSSと数行のJavaScriptで作る演出です。この記事では9種類を選び、cursor: noneとpointermove、tra

css ツールチップ吹き出しは、ボタンやアイコンにカーソルを合わせると短い説明が浮かび上がる小さな部品です。今回は9種類を選び、位置合わせの基本からCSS Anchor PositioningやPopover APIといった新しい仕組みま

マイクロインタラクション css は、ボタンを押す・保存する・タブを切り替える一つの操作に、画面がひと呼吸だけ反応して見せる小さなアニメーションです。この記事では9種類を選び、transitionと@keyframesだけで実装しました。グ

css ダークモード切り替えは、ページの配色を light と dark で入れ替えるトグルの動きを CSS だけで作る手法です。この記事では9種類を選び、アイコンの回転から light-dark() 関数まで、実装ごとにコードをそろえ