我试图捕捉元素动画中的特定时刻。意思 – 我希望动画在X点开始和停止(让我们说在100秒动画的第5个开始和停止)。
这是我的拍摄
JSFiddle
@-webkit-keyframes background {
from { background: yellow; }
100% {
background: blue;
}
}
div {
-webkit-animation-name: background;
-webkit-animation-duration: 100s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-delay: -40s;
-webkit-animation-play-state: paused;
}
这似乎在Chrome和Firefox中运行良好，但似乎在Safari和IE中无效(没有办法，对吧？)
注意：我特意留下了前缀，以便在Safari上进行测试。
与Chrome不同，似乎动画从未在Safari中启动，并保持在初始步骤。
UPDATE /澄清
我需要的是能够捕获动画的特定FRAME。在Chrome中打开我的小提琴，并在我的小提琴中播放动画延迟属性(确保它保持不变)。你会看到，你可以抓住一个特定的动画框架。完全是我需要的我的问题是，这不工作在Safari。
解决方法
如何创建5秒的关键帧动画，并确保框架相同的“百分之百”。
由于时间的动画比例是百分比，我们可以计算出100ms / 5000ms等于2％/ 100％。
div {
background:#333;
padding:10px;
width:100px;
height:100px;
color:#fff;
animation-name: animateAndPause;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes animateAndPause {
0% {
-ms-transform: rotate(0deg); /* IE 9 */
-webkit-transform: rotate(0deg); /* Chrome,Safari,Opera */
transform: rotate(0deg);
}
98% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome,Opera */
transform: rotate(360deg);
}
100% {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform: rotate(360deg); /* Chrome,Opera */
transform: rotate(360deg);
}
}
为了演示的目的，jsfiddle有一个更长的暂停，500ms。
