cssのアニメーションを逆再生したい

Question

前提・実現したいこと

JS Bin
上下に動くアニメーションのdivが2つあります。
一方のみ逆再生することで、一方は上から動き始め、一方は下から動き始めるようにしたいです。

発生している問題・エラーメッセージ

両方とも同じ動きをします。

該当のソースコード

<div class="wrap">
  <div class="item a"></div>
  <div class="item b"></div>
</div>

.wrap {
  display: flex;
}

.item {
  width: 100px;
  height: 100px;
  animation: moveItem 2s linear infinite;
}

.a {
  background-color: gray;  
}

.b {
  background-color: lightgray;
  animation-direction: reverse;
}

@keyframes moveItem {
  0% {
    transform: translateY(-10%);
  }
  50% {
    transform: translateY(10%);
  }
  100% {
    transform: translateY(-10%);
  }
}

試したこと

「css animation 逆」でググって見つけた下記ページ
animation-direction - CSS: カスケーディングスタイルシート | MDN
で、animation-direction: reverse;を設定することで、アニメーションの逆再生ができると読み取れたので、一方のdivに設定しましたが効果がありませんでした。

Answer 1

アニメーションの指定が、下記のようになってます。

0%{translateY(-10%)} → 50%{translateY(10%)} → 100%{translateY(-10%)}

これを animation-direction: reverse; で逆にしてみます。

100%{translateY(-10%)} → 50%{translateY(10%)} → 0%{translateY(-10%)}

動きは同じになりますよね。

ご希望の動きは下記ではないでしょうか。

.item {
  width: 100px;
  height: 100px;
  animation: moveItem 1s linear infinite;
}
.a {
  background-color: gray; 
  animation-direction: alternate;
}
.b {
  background-color: lightgray;
  animation-direction: alternate-reverse;
}
@keyframes moveItem {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}

CodePen サンプル

Comments

[erajera]

ありがとうございます。片道のキーフレームで往復できるプロパティも知ることができてよかったです。

Answer 2

animation-direction: reverse は効いていますが、キーフレーム moveItem は逆向きに再生しても同じ動きです。

逆向きのキーフレームを定義するか、片方を animation-delay: 1s; にするのはいかがでしょうか

Answer 3

このままで逆再生はできていますよ。
アニメーションが逆再生でも同じ動きしているだけです。
moveItemを以下のようにしてみるとわかります

@keyframes moveItem {
  0% {
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(10%);
  }
  100% {
    transform: translateY(-10%);
  }
}