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

CSSでアニメーションを交互方向に再生する方法｜animation-directionプロパティの使い方

CSSでアニメーションを交互（alternate）の方向に実行したい場合は、animation-direction プロパティを使用します。このプロパティに alternate という値を指定することで、アニメーションが通常方向と逆方向を交互に繰り返すようになります。

animation-directionプロパティとは

animation-direction は、アニメーションの再生方向を制御するためのCSSプロパティです。主な値は以下のとおりです。

  • normal：毎回同じ方向（順方向）で再生します（初期値）。
  • reverse：毎回逆方向で再生します。
  • alternate：順方向と逆方向を交互に切り替えて再生します。
  • alternate-reverse：逆方向から開始し、以降は交互に切り替えます。

コード例

以下の例では、animation-direction: alternate; を指定し、背景色が緑から青へ、そして青から緑へと往復するアニメーションを実現しています。あわせて animation-iteration-count: 3; により、3回繰り返すように設定しています。

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 200px;
        background-color: yellow;
        animation-name: myanim;
        animation-duration: 2s;
        animation-direction: alternate;
        animation-iteration-count: 3;
      }
      @keyframes myanim {
        from {
          background-color: green;
        }
        to {
          background-color: blue;
        }
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

動作のポイント

この例では、1回目のサイクルで背景色が緑 → 青に変化し、2回目のサイクルでは青 → 緑と逆方向に戻ります。alternate を使うことで、行って戻るような自然な往復アニメーションを簡単に作成できるのが特徴です。

  1. CSSのletter-spacingプロパティをアニメーションさせる方法

    CSSでは、letter-spacing（文字間隔）プロパティも他のプロパティと同様にアニメーションさせることができます。@keyframesルールと組み合わせることで、文字と文字の間隔が徐々に広がったり狭まったりする滑らかなエフェクトを実現できます。 実装例 以下のコードは、letter-spacingプロパティにアニメーションを適用する基本的な例です。テキストの文字間隔が3pxから20pxへと変化し、その動きが無限に繰り返されます。 <!DOCTYPE html> <html>    <head>     &nbs

  2. CSSでmargin-rightプロパティをアニメーションさせる方法

    CSSでmargin-rightプロパティをアニメーションさせる方法 CSSでは、@keyframesルールとanimationプロパティを組み合わせることで、margin-right(右マージン)にもアニメーション効果を適用できます。これにより、要素の右側の余白が時間の経過とともに滑らかに変化する動きを実現できます。 以下のサンプルコードでは、青色のdiv要素に対して4秒間のアニメーションを無限に繰り返す設定を行い、進行率30%の時点でmargin-rightが30pxに変化するよう定義しています。 サンプルコード <!DOCTYPE html> <html> &nb