移動距離の違う要素のアニメーションを同じ速度にしたい

Question

CSS3の@keyframesを使っているのですが、移動速度が距離と関係する為A要素がtranslateY(100px)が終着点に対しB要素の終着点がtranslateY(200px)であるとばらばらに動いてしまいます。

どうすればCSS3のアニメーションで速度を一定に出来るでしょうか？

Answer 1

素早い回答ありがとうございます！！

Answer 2

速度は同じように動かして、Aだけ途中で止めるということでしょうか。

そういうことでしたら、50%のキーフレームを設定して、そこでAは最終の位置まで移動させる、そしてBは中間点に置く、というようなことをすればいいでしょう。