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/

Answer 2

如果您希望动画停止并从特定点开始，则需要更多关键帧：

@-webkit-keyframes background {
    0% { background: yellow; }
    /* When You Want */% { background: /* A different color in-between yellow and blue! */; }
    /* When You Want */% { background: /* A different color in-between yellow and blue! */; }
    100% { background: blue; }
}
div {
    -webkit-animation-name: background;
    -webkit-animation-duration: 100s;
    -webkit-animation-timing-function: ease;
}

将第一个/* When You Want */%替换为您希望停止的动画持续时间的百分比。

将第二个/* When You Want */%替换为您希望它再次开始的动画持续时间的百分比。

将/* A different color in-between yellow and blue! */的两个匹配项替换为相同的颜色，黄色和蓝色之间的颜色。

Answer 3

试试这段代码：与所有浏览器兼容，特别是safari。

div {
  width: 100%;
  background-color: #fff;
  position: relative;
  -webkit-animation-name: example;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 5s;
  /* Chrome, Safari, Opera */
  -webkit-animation-delay: 5s;
  /* Chrome, Safari, Opera */
  animation-name: example;
  animation-duration: 5s;
  animation-delay: 5s;
  -webkit-animation-iteration-count: 100;
  /* Chrome, Safari, Opera */
  animation-iteration-count: 100;
  
}
/* Chrome, Safari, Opera */

@-webkit-keyframes example {
  25% {
    background-color: blue;
  }
  50% {
    background-color:yellow ;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
}
/* Standard syntax */

@keyframes example {
  25% {
    background-color: blue;
  }
  50% {
    background-color:yellow ;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
}

<div>Color bar</div>

如果您不想100次，可以将其取出并添加100次持续时间，因为我不确定你想要什么

如果您有任何疑问，请与我们联系。

Answer 4

这应该适用于Safari：Fiddle

    @-webkit-keyframes change {
      0% { background-color: yellow; }
      100% { background-color: blue; }
    }

    div {
        -webkit-animation-name: change;
        -webkit-animation-delay: 0s;
        -webkit-animation-duration: 5s;
        -webkit-animation-play-state: running;
        -webkit-animation-timing-function: cubic-bezier(0.29, 0.3, 0.86, 0.99);
    }

使用立方贝塞尔曲线可以复制停止的动画，然后从100s开始的5s开始，但是在没有javascript的情况下启动和停止动画将非常困难。

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

4 个答案: