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

Posted 2023-03-06

【中文标题】CSS 动画延迟和播放状态行为

【英文标题】：CSS Animations delay and play-state behavior

【发布时间】：2015-08-31 12:28:12

【问题描述】：

我正在尝试捕捉元素动画中的特定时刻。含义 - 我希望动画在 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 中不起作用。

【问题讨论】：

动画延迟应该是大于0的数字

不正确。 developer.mozilla.org/en-US/docs/Web/CSS/animation-delay 为动画延迟指定负值会导致动画立即开始执行。但是，它似乎已经在其周期的中途开始执行。例如，如果您将 -1s 指定为动画延迟时间，则动画将立即开始，但会在动画序列的 1 秒后开始。

在规范中看起来模棱两可。如果动画被暂停，Safari 不会启动动画，即使是负延迟也是如此。如果您允许它启动，然后在延迟之后，以编程方式设置style.webkitAnimationPlayState('paused') 它“有效”，但我得到了奇怪的结果，超时时间很短 - 似乎跳到动画的结尾，这对我来说毫无意义......无论如何，这里有 100 毫秒的延迟 jsfiddle.net/Lb06rh1L

感谢您的回答。我仍然更喜欢仅使用 CSS 的解决方案，因为需要为页面上的多个对象完成此过程。

如果有什么我错过了，我想知道更多关于我的答案。

【参考方案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/

【讨论】：

这仍然不允许我捕捉动画的特定帧。在我的小提琴中使用 -webkit-animation-delay 值来看看我的意思（确保它仍然是负数）。您将看到，您正在捕捉动画的特定帧。这就是我需要的。

我玩过动画延迟，虽然我看不到你想去哪里，你能把它放在上下文中吗？负值看起来很像正等值。 w3schools.com/cs-s-ref/…

它是这样的：（没关系），但我需要获得具有一定不透明度的颜色，而我不能使用 rgba() 函数。例如，给定黑色，我想在不使用 RGBA 的情况下获取 rgba(#000, .5)。我想的方法是创建一个动画长度为 100 毫秒。然后在某个点开始和结束动画（因此使用负延迟）。这基本上允许我从动画中捕捉 1 帧，捕捉特定不透明状态下的颜色。希望它清楚。 @Frankey

我认为纯粹的 css 很难做到这一点，一些 javascript 总是有帮助的，只需向元素添加一个类，其超时时间与您的不透明度级别相匹配。或者在此示例中，您可以单击 div 并暂停。 jsfiddle.net/bfu9wvxt/12

这是我正在研究的一个例子。适用于除 safari 以外的所有浏览器。 codepen.io/anon/pen/qZvjVw

【参考方案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到 持续时间，因为我不确定你想要什么

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

【讨论】：

感谢您的回答，但这不是我所要求的。我的问题是我需要动画在某个点停止而不是一直走。例如，如果动画从蓝色背景变为黄色，我希望动画在中途某个地方开始和停止。

【参考方案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! */ 替换为相同的颜色，黄色和蓝色之间的颜色。

【参考方案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，将很难启动和停止动画。