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 中动画似乎永远不会开始，而是停留在初始步骤。

这是一个已知问题吗？是否有解决方法或其他方法来实现这一点？

更新/澄清

我需要的是能够捕捉动画的特定帧。在 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

试试这个代码： 兼容所有浏览器，尤其是 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次，你可以把它拿出来加100s到 持续时间，因为我不确定你想要什么

如果您有任何问题，请告诉我。

Answer 3

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

@-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 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);
    }

使用三次贝塞尔曲线可以复制停止然后从 5 秒开始（每 100 秒）的动画，但如果没有 javascript，将很难启动和停止动画。