2

たとえば、これは私のコードです:

@-webkit-keyframes anim {
    0%   {
        -webkit-transform: translate(-100px,0px) rotate(5deg);
    }
    50%   {
        -webkit-transform: translate(-140px,-5px) rotate(10deg);
    }
    100%   {
        -webkit-transform: translate(200px,-30px) rotate(40deg);
    }
}

いつ 50% になったかを正確に知るにはどうすればよいですか? いつ終了するかを検出できることはわかっていますが、ここでは役に立ちません。

さて... アニメーションは 3 秒間実行されるので、時間に基づいて作成しようとすることもできますが、それは危険なようです。

ありがとう

4

1 に答える 1

0

1 つのアニメーションの途中段階での通知イベントはないと思います。

回避策として、2 つの別々のアニメーションを連鎖させ (JS を使用して最初のアニメーションが終了したときに 2 番目のアニメーションを開始する)、最初のアニメーションの最後にあるイベントを使用して、シーケンス全体の中間に到達した時期を知ることができます。

回避策に関する記事は次のとおりです。

CSS アニメーション キーフレーム イベント (Javascript ソリューション)

于 2013-06-14T03:09:33.043 に答える