CSS3动画填充模式polyfill

Question

前言

让我们假设一个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>?

在jsFiddle上运行它

• 注1:我在这里没有包含供应商前缀以简化
• 注2:这只是一个例子,请不要回复"只使用jQuery fadeIn函数"等.

---

有些事要知道

在这个答案中,我读到animation-fill-modeChrome 16+,Safari 4 +,Firefox 5+支持.

但Chrome 1+和Opera也支持animation单独使用.因此,即使不支持,使用Modernizr进行的一般测试也可能会返回正值.fill-mode

目标animation-fill-mode我在Modernizr上添加了一个新的测试:

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

现在我有一个.no-animation-fill-modeCSS和Modernizr.animationFillModeJavaScript 的课程.

我还从CSS3动画规格中读到:

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

---

最后,问题

是否可以在动画结束的确切秒数内运行简单的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？

非常感谢!

Answer 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更加膨胀(因为你必须复制样式),并且在处理复杂的动画时会更复杂.然而:

1. 它应该适用于任何动画情况.
2. 它将避免使用JavaScript (除了$().fadeIn后备).
3. 它适用于所有支持CSS动画的浏览器.
4. 您不会冒JS和CSS变得不同步的风险.

关于使用短格式,最好不要为了达到尽可能广泛的浏览器兼容性.但是,如上面的示例所示,我选择使用短格式,因为它们更清晰,我可以理解不想一直写(或阅读)冗长的版本.出于这个原因,我建议使用less来生成你的css:

http://lesscss.org/

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