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

CSSアニメーションの再生方向を制御するanimation-directionプロパティの使い方

CSSのanimation-directionプロパティを使うと、アニメーションを順方向（前進）で再生するか、逆方向（後退）で再生するか、あるいは順方向と逆方向を交互に繰り返すかを指定できます。アニメーションに動きの変化を持たせたい場合に非常に便利なプロパティです。

animation-directionプロパティで指定できる主な値

  • normal：アニメーションを毎回順方向に再生します（デフォルト値）。
  • reverse：アニメーションを毎回逆方向に再生します。
  • alternate：奇数回は順方向、偶数回は逆方向と、再生方向を交互に切り替えます。
  • alternate-reverse：奇数回は逆方向、偶数回は順方向と、交互に切り替えて再生します。

animation-directionの実装例

以下のコードでは、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 myanimでは、アニメーションの開始時点（from）で背景色を緑に、終了時点（to）で青に変化するよう定義しています。ここでanimation-direction: reverse;を指定しているため、実際の再生は青から緑へと逆方向に進行します。

なお、アニメーションを繰り返し再生したい場合は、animation-iteration-countプロパティをinfiniteに設定すると、alternateやalternate-reverseの交互再生の効果をより分かりやすく確認できます。

  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります