CSS | アニメーションの再生方向で指定可能な値と比較

2020-01-092020-09-27CSS アニメーション 基本,CSS

こちらはCSSアニメーションの再生方向指定プロパティ（animation-direction）で指定可能な値と、比較用の動作サンプル集になります。

animation-directionの設定方法

CSSアニメーションの再生方向はanimation-directionプロパティで個別に、またはanimationプロパティにて一括で設定する事が可能です。

animation-name: animname;
animation-duration: 1s;
animation-direction: normal;

animation: animation 1s normal;

animation-directionの値一覧

animation-directionに設定可能な値一覧です。

伸縮バーでanimation-directionを比較

伸縮バーアニメーションでanimation-directionを比較した場合の動作サンプルになります。

See the Pen CSS animation direction (bar) by yochans (@yochans) on CodePen.

アニメーション時間は3秒、繰り返しはinfinite（無制限）、widthにて横幅変更しています。

nomalとreverseはアニメーション完了後に元の状態に戻るので少し見にくいですが、alternate-reverseは逆再生が完了後に正方向の再生、その次は逆再生となっている事がわかります。

以下、伸縮バーアニメーションでのサンプルコードです。（HTMLは共通）

 < <div class="samles">
  <div class="ease">normal</div>
  <div class="reverse">reverse</div>
  <div class="alternate">alternate</div>
  <div class="alternate-reverse">alternate-reverse</div>
 </div>

.samles div{
  width: 100%;
  max-width: 70%;
  margin: 6px;
  padding: 3px;
  color: #FFF;
  background: #0091EA;
  white-space: nowrap;
  animation: animation 3s ease infinite;
}

.samles .normal{
  animation-direction: normal;
}

.samles .reverse{
 animation-direction: reverse;
}
.samles .alternate{
  animation-direction: alternate;
}
.samles .alternate-reverse{
  animation-direction: alternate-reverse;
}



@keyframes animation{
  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}

X軸移動アニメーションでanimation-directionを比較

X軸移動バーアニメーションでanimation-directionを比較した場合の動作サンプルになります。

See the Pen CSS animation direction (move) by yochans (@yochans) on CodePen.

アニメーション時間は3秒、繰り返しはinfinite（無制限）、translateXにてX座標を変更しています。

CSSアニメーションでの色変更に関しても、@keyframesで開始と終了を同じポジションに設定しなくても基本的にはalternateとalternate-reverseではスムーズな移動を実現可能です。

 <div class="samles">
  <div class="ease">normal</div>
  <div class="reverse">reverse</div>
  <div class="alternate">alternate</div>
  <div class="alternate-reverse">alternate-reverse</div>
 </div>

.samles div{
  width: 150px;
  margin: 6px;
  padding: 3px;
  color: #FFF;
  background: #0091EA;
  white-space: nowrap;
  animation: animation 3s infinite;
}

.samles .normal{
  animation-direction: normal;
}
.samles .reverse{
 animation-direction: reverse;
}
.samles .alternate{
  animation-direction: alternate;
}
.samles .alternate-reverse{
  animation-direction: alternate-reverse;
}



@keyframes animation{
  0%{
transform: translateX(0px);
  }
  100%{
transform: translateX(400px);
  }
}

背景色変更アニメーションでイージングを比較

背景色変更アニメーションでイージングを比較した場合の動作サンプルになります。

See the Pen CSS animation direction (color) by yochans (@yochans) on CodePen.

アニメーション時間は4秒、繰り返しはinfinite（無制限）、animation-directionはalternate（通常再生後、逆再生）、backgroundにて背景色を変更しています。

CSSアニメーションでの色変更に関しても、@keyframesで開始と終了を同一色に設定しなくてもalternateとalternate-reverseではスムーズなチェンジカラーを簡単に実現可能です。

 <div class="samles">
  <div class="ease">normal</div>
  <div class="reverse">reverse</div>
  <div class="alternate">alternate</div>
  <div class="alternate-reverse">alternate-reverse</div>
 </div>

.samles div{
  display:flex;
  margin: 6px;
  padding: 6px;
  color: #FFF;
  background: #0091EA;
  white-space: nowrap;
  animation: animation 4s infinite alternate;
}

.samles .normal{
  animation-direction: normal;
}
.samles .reverse{
 animation-direction: reverse;
}
.samles .alternate{
  animation-direction: alternate;
}
.samles .alternate-reverse{
  animation-direction: alternate-reverse;
}


@keyframes animation{
  0%{
  background: #0091EA;
  }
  100%{
  background: #dc143c;
  }
}