ホバー

動作

React アニメーションライブラリなしで作るCSS9選

Reactで作った画面に動きを付けたいとき最初に思い浮かぶのはreact アニメーションライブラリの導入ですが、コンポーネントが現れたり消えたりするタイミングさえ押さえれば一行でコピペOKなCSSだけで済むことも多いです。この記事はそんな

ボタンを押す、カードが現れる——動きの速さが一定だと硬く見え、最初は速く途中からゆっくりだったり最後に少し弾んだりすると自然に見えます。この速度変化を4つの数値で指定するのがcss イージング関数のcubic-bezier、跳ねる動きをばね

ポートフォリオサイトや製品紹介ページで、大きな四角と小さな四角が写真のコラージュのように組み合わさったレイアウトを見たことはないでしょうか。あれはベントグリッドと呼ばれるレイアウトで、この記事ではマス目にマウスを乗せたときの反応を作るCSS

ゲーム配信サイトやポートフォリオで、文字やボタンの周りが夜の看板のようにぼんやり光っているのを見たことはないでしょうか。あれは画像や動画ではなく、CSSのコードだけで光のにじみを描く演出で、css ネオンやグロー効果と呼ばれます。目立たせた

css 下線アニメーションは、単語や文の下・背後に敷いた線や面を動かして、読む人の視線をその一語に止める技法です。今回はこの技法を9つ選び、それぞれ6〜25行のコードにまとめました。上のグリッドは表示された瞬間から自動で繰り返し動いていて

tailwind アニメーションは、tailwind.config.jsを使わずCSSの@themeブロックに--animate-変数と@keyframesを一緒に書くと、その名前がそのままユーティリティクラスになるTailwind v4の

css アイコンアニメーションとは、再生ボタンや通知ベル、更新マークのような定番のインターフェースアイコンを、文字ではなく座標を持つSVGのpathとして描き、状態が変わるたびに動かす手法を指します。書体に頼らないぶん、フォントが変わって

css 入力フォームのアニメーションは、クリックする前・クリックした瞬間・値を入力し終えたあとまで、ブラウザがすでに持っている:focus:focus-within:placeholder-shown:valid:invalidという状態を

css 枠線アニメーションは、カードや入力欄の外側の線だけを動かして「今なにが起きているか」を伝える技法です。今回は9種類を選び、光の縞を流すもの、SVGで線を描くもの、色相だけを回すものまで、マスク・SVG・アウトライン・@proper

css ハートアニメーションを9種類まとめました。いいねボタンのハートから星評価、拍手カウントや絵文字リアクションまで、押した瞬間に画面がはっきり反応するものだけを選び、ほとんどはtransformとopacityだけで動き、05だけwi