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

CSSのopacityプロパティでアニメーションを作成する方法

CSSで不透明度（opacity）プロパティにアニメーションを適用するには、@keyframesルールとanimationプロパティを組み合わせて使用します。要素の透明度を時間の経過とともに変化させることで、フェードイン・フェードアウトのような視覚効果を簡単に実現できます。

基本的な仕組み

@keyframesでアニメーションの各段階におけるopacityの値を定義し、animationプロパティでそのアニメーションを要素に適用します。以下の例では、3つの重なったボックスを使って、不透明度が変化する様子を確認できます。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         #demo1 {
            position: absolute;
            top: 60px;
            width: 300px;
            height: 150px;
            background-color: lightblue;
            animation: myanim 4s infinite;
         }
         #demo2 {
            position: absolute;
            top: 90px;
            left: 30px;
            width: 300px;
            height: 150px;
            background-color: orange;
            animation: myanim 3s infinite;
         }
         #demo3 {
            position: absolute;
            top: 120px;
            left: 60px;
            width: 350px;
            height: 150px;
            background-color: coral;
         }
         @keyframes myanim {
            30% {
               opacity: 0.4;
            }
         }
      </style>
   </head>
   <body>
      <p>不透明度の変化を表示しています</p>
      <div id = "demo1"><h1>End div</h1></div>
      <div id = "demo2"></div>
      <div id = "demo3"><h1>Start div</h1></div>
   </body>
</html>

コードの解説

@keyframes myanim： アニメーションの進行率が30%の時点でopacityを0.4に変更するよう定義しています。これにより、要素は徐々に半透明になり、その後元の不透明度へ戻ります。

#demo1： 水色（lightblue）のボックスです。animation: myanim 4s infinite;により、4秒かけてアニメーションを無限に繰り返します。

#demo2： オレンジ色（orange）のボックスです。同じアニメーションを3秒周期で適用しているため、demo1とは異なるタイミングで透明度が変化します。

#demo3： コーラル色（coral）のボックスです。アニメーションを設定していないため、常に完全な不透明状態で表示されます。比較用の基準として機能します。

ポイント

  • opacityは0（完全に透明）から1（完全不透明）までの数値で指定します。
  • infiniteを指定すると、アニメーションが無限に繰り返されます。
  • animation-durationの値を変えることで、透明度が変化するスピードを調整できます。
  • animation-timing-function（例：ease-in-out）を追加すると、より滑らかで自然な動きになります。
  1. CSSのperspectiveプロパティをアニメーションさせる方法を解説

    CSSのperspective（パースペクティブ）プロパティは、3D変換における奥行きの深さを定義するプロパティです。このプロパティにアニメーションを適用すると、視点の距離が変化することで、要素に動的な立体効果を与えることができます。perspectiveプロパティの基本perspectiveプロパティの値が小さいほど視点が要素に近づき、3D効果が強調されます。逆に値が大きいほど、遠くから見たような自然な奥行き表現になります。この値の変化を@keyframesで定義することで、アニメーションとして実装できます。実装例以下は、perspectiveプロパティにCSSアニメーションを適用するサンプ

  2. CSSのpadding-topプロパティでアニメーションを実行する方法

    CSSでは、padding-topプロパティもアニメーションの対象にすることができます。@keyframesルールの中でpadding-topの値を変化させることで、要素の上側の余白が滑らかに動くアニメーションを作成できます。実装のポイントアニメーションさせたい要素にanimationプロパティを設定します。@keyframes内で、進行度（例：30%）の時点でのpadding-topの値を指定します。アニメーション時間や繰り返し回数は自由に調整可能です。サンプルコード以下のコードでは、3秒間のアニメーションを無限に繰り返し、途中（30%の時点）でpadding-topが60pxまで変化します