CSS3 动画填充模式 polyfill

Posted 2023-02-18

【中文标题】CSS3 动画填充模式 polyfill

【英文标题】：CSS3 animation-fill-mode polyfill

【发布时间】：2012-09-14 02:16:11

【问题描述】：

前言

让我们假设一个div 从opacity:0; 动画到opacity:1;，我想在动画结束后保留​​opacity:1;。

animation-fill-mode:forwards; 就是这样做的。

@keyframes myAnimation 
    from  opacity:0; 
    to  opacity:1; 

div 
    opacity:0;
    animation-name:myAnimation;
    animation-delay:1s;
    animation-duration:2s;
    animation-fill-mode:forwards;
​
<div>just a test</div>​

Run it on jsFiddle

注意 1：为了简化，我没有在此处包含供应商前缀 注意2：这只是一个例子，请不要回复“只使用jQuery的fadeIn函数”等。

---

需要了解的一些事情

在this answer 我读到animation-fill-mode 受Chrome 16+、Safari 4+、Firefox 5+ 支持。

但 animation 单独 is supported by Chrome 1+ 和 Opera 也是。因此，即使不支持 fill-mode，使用 Modernizr 进行的一般测试也可能返回正值。

为了定位 animation-fill-mode，我在 Modernizr 上添加了一个新测试：

Modernizr.addTest('animation-fill-mode',function()
    return Modernizr.testAllProps('animationFillMode');
);

现在我有一个用于 CSS 的 .no-animation-fill-mode 类和用于 javascript 的 Modernizr.animationFillMode。

我还从CSS3 animations specs 读到：

文档样式表中指定的动画将从 文件加载

---

最后，问题

在确切的秒数动画结束时运行一个简单的jQuery函数是否可以

$(document).ready(function()
    if(!Modernizr.animation)
        $('div').delay(1000).fadeIn(2000);
    else if(!Modernizr.animationFillMode)
        $('div').delay(3000).show();
    
);

在 CSS 中：

.no-animation-fill-mode div 
    animation-iteration-count:1;

/* or just animation:myAnimation 2s 1s 1; for everyone */

或者对于animation-fill-mode 是否有任何已知的 特定 填充？

---

另外，如果我使用速记语法会发生什么

animation:myAnimation 2s 1s forwards;

在支持animation 但不支持animation-fill-mode 的浏览器上？

非常感谢！

【参考方案1】：

如果是我，我会尝试选择更简单的替代方案 - 如果可能的话。我会降级我的实现，以便我只使用普遍接受的东西。后来，当该功能得到更广泛的支持时，我会考虑实现它。我很少考虑使用在文档页面上广播 This is an experimental technology 的功能 - 但也许我应该被归类为无聊:)

在您的示例中，您可以通过最初定义元素的结束状态并使用链接动画（如果需要在操作之前延迟）来获得与 animation-fill-mode:forwards 相同的结果：

@keyframes waitandhide 
  from  opacity:0; 
  to  opacity:0; 

@keyframes show 
  from  opacity:0; 
  to  opacity:1; 

div 
  opacity:1;
  animation: waitandhide 2s 0s, show 2s 2s;

<div>just a test</div>​

http://jsfiddle.net/RMJ8s/1/

现在，速度较慢的浏览器可能会先闪现您的初始元素状态，然后再将它们再次隐藏。但根据我的经验，我只在非常旧的机器和需要渲染大量 css 的页面上看到过这种情况。

显然，上面的内容确实让你的 css 膨胀了一点（因为你必须复制样式），并且在处理复杂的动画时会更加复杂。然而：

它几乎适用于任何动画情况。 这将避免对 JavaScript 的需求（保存为 $()​​.fadeIn 后备）。 它适用于所有支持 css 动画的浏览器。 您不会冒 JS 和 CSS 不同步/不同步的风险。

关于使用短格式，如果您想尽可能广泛地与浏览器兼容，最好不要这样做。但是，如我上面的示例所示，我选择使用短格式，因为它们更清晰，我可以理解不想一直写（或阅读）冗长的版本。出于这个原因，我建议使用 less 来生成你的 css：

http://lesscss.org/

http://radiatingstar.com/css-keyframes-animations-with-less

【讨论】：

完美运行。非常感谢

使用-webkit-backface-visibility: hidden;防止浏览器闪烁内容

【参考方案2】：

我不知道任何 polyfill... 但我想说你确实应该使用你自己的自定义 Modernizr 测试，对于不支持动画填充模式的浏览器，你应该使用 animationEnd 事件来触发你的回调并将不透明度设置为 1（或删除一个类） .

见：CSS3 transition events

至于简写符号，IE

【讨论】：

似乎...很好吃 :-) 关于速记语法的任何信息？

不要使用它我会说...需要进一步测试;-)

嗯，我需要确定一下，因为它在处理多个动画时非常有用，其中一个必须保持最终状态，另一个不能。

无论如何，非常感谢，您的回答很有帮助！但我会再等几天再分配赏金

【参考方案3】：

仅供参考，这就是我现在如何实施 pebbl 的答案（这是一个非常聪明的答案）。我只需要Modernizr的css-animation检测。

假设我想滑动和淡化这个 div：

<div class="target">Some stuff</div>

首先，我用厂商前缀写下动画

@keyframes byebye 
    0%  height:100px; opacity:1; 
    100%  opacity:0; height:0; 

然后是一个新的类

.target-animation 
    height:0; opacity:0; // same as "100%" state
    animation:byebye 750ms 1;

转向 javascript：

// $('.whatever').on('click',function() ...

if(Modernizr.cssanimations)
    // css animations are supported!
    $('.target').addClass('target-animation');
else
    // i hate you IE
    $('.target').animate(height:0,opacity:0,750);

Demo

如果您需要多次触发动画，只需按照 here 的说明使用 javascript 删除该类：

// if(Modernizr.cssanimations) ...

$('target').addClass('target-animation').on('webkitAnimationEnd oAnimationEnd oanimationend animationend msAnimationEnd',function()
    $(this).removeClass('target-animation')
    // don't forget to  .hide()  if needed
);

// ... else