【しーえすえすあにめーしょん】
CSSアニメーション とは？
最終更新:
💡 CSSだけで要素に「動き」を付ける魔法
CSSだけでウェブページ上の要素に動きを付ける技術。フェードイン・スライド・回転などのアニメーションをJavaScript不要で実現できる。
📌 このページのポイント
- CSSだけでウェブページの要素にアニメーションを付けられる
- transitionはホバー時などの状態変化を滑らかにする
- @keyframesを使うと複雑なアニメーションを定義できる
- JavaScriptなしで実装できるが、性能は動かすプロパティや環境に依存する
ひよこ CSSアニメーションって何？
ペンギン先生 CSSだけでウェブページの要素に動きを付ける技術だよ。ボタンをホバーしたときに色がふわっと変わったり、ページを開いたときに要素がスライドして現れたりする、あの動きのことだね。
ひよこ transitionと@keyframesの違いは？
ペンギン先生 transitionは「AからBへの変化を滑らかにする」もの。ホバーしたとき色が0.3秒かけてゆっくり変わる、みたいな単純な遷移に使う。@keyframesは「0%のとき→50%のとき→100%のとき」みたいに途中の状態も細かく指定できるから、ローディングスピナーのようなずっと動き続けるアニメーションが作れるんだ。
ひよこ おもしろい！JavaScriptでアニメーションするのとどっちがいいの？
ペンギン先生 CSSかJavaScriptかだけでは性能は決まらないよ。何を動かすか、要素数、ブラウザーなどに左右されるんだ。単純な見た目の変化はCSSで表現しやすく、条件分岐などが必要ならJavaScriptと組み合わせられるよ。
ひよこ CSSアニメーションで気を付けることは？
ペンギン先生 transformやopacityはレイアウトや再描画を避けやすいけど、必ずGPUで高速になる保証はないよ。幅や高さを動かすとレイアウトの負荷が増えることがあるから、実際に測ろう。動きを減らしたい人にはprefers-reduced-motionに応じた表示も用意するんだ。
もっと詳しく知りたい人へ
@keyframesを書いたのに動かないのはなぜ？
要素のanimation-nameがキーフレーム名と一致しているか、animation-durationが0秒のままになっていないかを確認します。@keyframesの定義だけでは要素に適用されません。表示がdisplay:noneの場合や、ほかの指定で値が上書きされている場合も確認します。
📖 おまけ：英語の意味
「CSS Animation」 ＝ CSSによるアニメーション
💬 Animationは「動画・動き」。CSSのプロパティを時間的に変化させて動きを作り出すよ