animetionのkeyframesを途中から再生したい

Question

@keyframes test {
	0% {transform: translateY(0);}
	50% {transform: translateY(500px);}
	100% {transform: translateY(1000px);}
}

のようなアニメーションがあったとして、ある要素は0%から。ある要素は50%からアニメーションを始めたりすることは出来ますでしょうか？

Comments

[chokojori]

animetion => animation

[RyoTsukuda]

訂正ありがとうございます！

Answer 1

直接%指定はできませんが、animation-delayに負の値を設定することで可能です。
例えば10秒でアニメーションさせる場合に50%の状態からアニメーションを開始したければ、その要素に対して
animation-delay: -5s;を指定してください。
本来のアニメーションの5秒経過した状態からアニメーションを始めることが出来ます。

Comments

[edisonthk]

マイナスというやり方は知らなかったので、すごい勉強になりました。

[RyoTsukuda]

私もマイナスにそんな効果があるなんて知りませんでした。ありがとうございます！

[MAGP]

お役に立てたならなによりです。

後一応マイナスというのがイメージしにくかったかもしれないので補足すると、

animation-delayはマイナス指定された場合、
アニメーションはあたかも指定時間前から開始されていたかのように表示されます。

animation-delay: -5s;と指定すると、
5秒前からその要素はアニメーションしているような解釈をされ、
結果として5秒後の状態からアニメーションが開始される、というわけです

Answer 2

できません。基本的に０％から始まる仕様になっています。

なので、50%から始まるアニメーションを作りたければ、別のアニメーションとして作成するしかないんですね。

@keyframes test1 {
    0% {transform: translateY(0);}
    50% {transform: translateY(500px);}
    100% {transform: translateY(1000px);}
}
@keyframes test2 {
    0% {transform: translateY(500px);}
    100% {transform: translateY(1000px);}
}