1

サイクルの一時停止後にアニメーションを実行したい。例として、

@-webkit-keyframes test {
    0%  { opacity:0; }
    50% { opacity:1; }
    100%{ opacity:0;}
}
.test {
    -webkit-animation:test 5s linear 10s infinite forwards;
}

10sのアニメーションを一時停止/遅延させてから、アニメーションを実行し5sてこのサイクルを繰り返したいと思います。

上記の例は、最初のサイクルでのみ機能します。無限サイクルの各サイクルで遅延/一時停止を誘発するにはどうすればよいですか? つまり、15sサイクルが必要ですが、フル(0% から 100%)5sのアニメーションを使用します。keyframe

keyframeパーセンテージを変更するつもりはないことに注意してください。

4

1 に答える 1

2

JavaScript がなければ、現在のキーフレームを変更せずに望むことは不可能です。代わりに次のことを行うこともできますが、それが毎回の遅延に対する唯一の非 JavaScript 修正です。

@-webkit-keyframes test {
    0%     { opacity: 0; }
    16.66% { opacity: 1; }
    33.33% { opacity: 0; }
    100%   { opacity: 0; }
}
.test {
    -webkit-animation:test 15s linear infinite forwards;
}

デモはこちら

前述のように、他の唯一の方法は、javascript を使用して CSS アニメーションをリセットすることです。それに関する役立つ記事はこちら

于 2013-09-27T19:47:08.480 に答える