CSS动画延迟和播放状态行为

Question

我试图捕捉元素动画中的特定时刻.含义 - 我希望动画在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中打开我的小提琴,在我的小提琴中播放动画延迟属性(确保它仍然是负数).您将看到的是,您可以捕获动画的1个特定帧.这正是我需要的.我的问题是这在Safari中不起作用.

Answer 1

创建 5 秒的关键帧动画并确保帧相同的“百分比为 100 毫秒”怎么样？

由于时间的动画比例是百分比，因此我们可以计算出 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, Safari, Opera */
     transform: rotate(360deg); 
    }   
   100% { 
     -ms-transform: rotate(360deg); /* IE 9 */
     -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
     transform: rotate(360deg);    
    }
}

为了演示的目的，jsfiddle 有更长的暂停，500ms。

https://jsfiddle.net/bfu9wvxt/5/