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

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

アニメーションを逆方向に実行するCSSプロパティとは？

CSSでアニメーションを逆方向（リバース）に実行するには、animation-direction プロパティを使用します。このプロパティに reverse という値を指定することで、通常は「from」から「to」へ進むアニメーションが、「to」から「from」へと逆向きに再生されます。

animation-direction で指定できる主な値

  • normal：通常方向で再生（初期値）
  • reverse：逆方向で再生
  • alternate：奇数回は通常方向、偶数回は逆方向で交互に再生
  • alternate-reverse：奇数回は逆方向、偶数回は通常方向で交互に再生

サンプルコード

以下の例では、div要素の背景色が変化するアニメーションに対して animation-direction: reverse; を指定し、逆方向に再生させています。

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

コードの解説

このサンプルでは、@keyframes ルールによって背景色を緑（green）から青（blue）へ変化させるアニメーション「myanim」を定義しています。通常の設定であれば緑→青の順に再生されますが、animation-direction: reverse; を指定しているため、実際には青→緑という逆の順序で表示されます。

また、animation-duration: 2s; によりアニメーションの長さは2秒に設定されており、対象となるdiv要素は幅150px・高さ200px・初期背景色が黄色（yellow）になっています。


  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