CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでbox-shadowプロパティをアニメーション化する方法

CSSでbox-shadowプロパティをアニメーションさせるには、@keyframesルールとanimationプロパティを組み合わせて使用します。これにより、要素の影の位置・ぼかし具合・色などを滑らかに変化させることができます。

実装のポイント

@keyframes内でアニメーションの進行度（例：20%）に応じてbox-shadowの値を指定すると、その状態へ向けて影が自動的に補間されながら変化します。以下のサンプルコードでは、黄色いボックスが上下に動きながら、オレンジ色の影が徐々に広がるアニメーションを実装しています。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 200px;
        height: 300px;
        background: yellow;
        border: 10px solid red;
        animation: myanim 3s infinite;
        bottom: 30px;
        position: absolute;
      }
      @keyframes myanim {
        20% {
          bottom: 100px;
          box-shadow: 30px 45px 70px orange;
        }
      }
    </style>
  </head>
  <body>
    <h2>box-shadowのアニメーション</h2>
    <div></div>
  </body>
</html>

コードの解説

animation: myanim 3s infinite; — 「myanim」という名前のキーフレームを3秒かけて再生し、無限に繰り返す設定です。

@keyframes myanim — アニメーションの途中経過を定義します。この例では20%の時点でbottomとbox-shadowの値を変更しています。

box-shadow: 30px 45px 70px orange; — 水平方向に30px、垂直方向に45pxずらし、ぼかし半径70pxのオレンジ色の影を描画します。

なお、box-shadowのアニメーションは描画負荷が比較的高いため、パフォーマンスが重要な場面ではopacityやtransformを使った擬似要素での代替も検討するとよいでしょう。

  1. CSSのwidthプロパティをアニメーション化する方法

    CSSで要素の width（幅）プロパティをアニメーションさせるには、@keyframes ルールと animation プロパティを組み合わせて使用します。幅の変化を滑らかに表現することで、開閉パネルやホバーエフェクトなど、さまざまなインタラクティブな演出が可能になります。実装のポイント@keyframes 内で、アニメーションの途中経過（例：30%）における幅の値を指定します。animation プロパティで、キーフレーム名・再生時間などを設定します。幅は数値（px など）で指定するため、ブラウザは値の補間を行い滑らかなアニメーションを実現します。サンプルコード以下のコードでは、div要素

  2. CSSアニメーションでtransformプロパティをアニメーション化する方法

    CSSを使えば、transform プロパティにも簡単にアニメーションを適用できます。transform をアニメーション化することで、要素の回転・移動・拡大縮小などを滑らかで軽量な演出として表現可能です。ここでは、@keyframes と animation プロパティを組み合わせた基本的な実装方法を解説します。 実装のポイント @keyframes：アニメーションの進行度ごとに適用するスタイル（キーフレーム）を定義します。 animation：アニメーション名や再生時間（duration）などをまとめて指定できるショートハンドプロパティです。 transform：キーフレーム内で rot