【CSS】animationのkeyframesを、初回だけ途中から再生する方法【ループ時】

hoge

animation の delayに負の値を設定する。

 

【具体例】

animation-delay: 10s なら
animation-delay: -5s

で、初回のみ、真ん中からスタートする。
２回目以降のループは、設定どおりの 0% から始まる。

 

※ infinite設定だったら、

１回目だけは 50% → 100%（duration: 5s）
２回目以降は 0% → 100% （duration: 10s）になる。

※もちろん、「-5s」の部分は好きな数字に置き換えて、「-7s」として 30% 地点から初回実行を始めることも可能。

 

p{
    animation: movex 10s linear -5s forwards infinite;
}
@keyframes movex {
    0% {transform: translate3d(0,0,0);}
    50% {transform: translate3d(100px,0,0);}
    100% {transform: translate3d(200px,0,0);}
}