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

CSSのanimation-directionで「逆再生→順再生」を実現するalternate-reverseの使い方

CSSでは、animation-directionプロパティを使用することで、アニメーションの再生方向を制御できます。まず逆方向（後ろ向き）に再生し、その後に順方向（前向き）で再生したい場合は、このプロパティにalternate-reverseという値を指定します。

animation-directionとalternate-reverseとは？

animation-directionは、@keyframesで定義したアニメーションをどの方向に繰り返し再生するかを決めるプロパティです。alternate-reverseを指定すると、最初のサイクルが逆方向から開始され、次のサイクルで順方向に切り替わります。以降も逆・順・逆・順…と交互に再生が続きます。

主な値の比較

  • normal：常に順方向に再生（初期値）
  • reverse：常に逆方向に再生
  • alternate：順方向と逆方向を交互に再生（最初は順方向）
  • alternate-reverse：逆方向と順方向を交互に再生（最初は逆方向）

実装例

以下のコードでは、黄色い正方形が2秒かけて色と位置を変化させながら、alternate-reverseによって逆再生からスタートし、計3回交互にアニメーションします。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 200px;
            position: relative;
            background-color: yellow;
            animation-name: myanim;
            animation-duration: 2s;
            animation-direction: alternate-reverse;
            animation-iteration-count: 3;
         }
         @keyframes myanim {
            0% {background-color:green; left:0px; top:0px;}
            50% {background-color:maroon; left:100px; top:100px;}
            100% {background-color:gray; left:0px; top:0px;}
         }
      </style>
   </head>
   <body>
      <div></div>
   </body>
</html>

コードのポイント解説

  • animation-name: myanim; … 適用するキーフレーム（@keyframes myanim）を指定します。
  • animation-duration: 2s; … 1回のアニメーションにかかる時間を2秒に設定しています。
  • animation-direction: alternate-reverse; … ここが今回のポイント。1回目は100%→0%の逆再生、2回目は0%→100%の順再生というように交互に切り替わります。
  • animation-iteration-count: 3; … アニメーションの繰り返し回数を3回に設定します。

このようにalternate-reverseを使えば、「逆方向→順方向」の往復アニメーションを簡単に実現できます。ローディング演出やボタンのホバーエフェクトなど、自然な往復動作を作りたい場面でぜひ活用してみてください。

  1. CSSのanimation-delayプロパティでアニメーション開始を遅らせる方法

    CSSでアニメーションの開始タイミングを遅らせたい場合は、animation-delayプロパティを使用します。このプロパティに秒数（s）やミリ秒（ms）を指定することで、アニメーションが始まるまでの待ち時間を簡単に設定できます。 animation-delayの基本的な使い方 以下のコード例では、黄色いボックスが表示されてから2秒後に、背景色が緑から青へと変化するアニメーションが開始されます。 サンプルコード <!DOCTYPE html> <html> <head> <style> div { width: 150px

  2. CSSのtopプロパティをアニメーションさせる方法

    CSSでは、topプロパティにも@keyframesを使ったアニメーションを適用できます。要素を上下に滑らかに移動させたい場合などに活用できるテクニックです。以下は、topプロパティをアニメーションさせて、オレンジ色のボックスが下方向へ移動するサンプルコードです。サンプルコード<!DOCTYPE html> <html>    <head>       <style>          div {       &nbs