CSS3动画填充模式polyfill
前言
让我们假设一个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; } just a test
在jsFiddle上运行它
- 注1：我在这里没有包含供应商前缀以简化
- 注2：这只是一个例子，请不要回答“只使用jQuery fadeIn函数”等。
有些事要知道
在这个答案中，我读到Chrome 16+，Safari 4 +，Firefox 5+支持animation-fill-mode 。
但Chrome 1+和Opera也支持 animation 。 因此，即使不支持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动画规格中读到：
文档样式表中指定的动画将从文档加载开始
最后，问题
是否可以在动画结束的确切秒数内运行简单的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 polyfill？
此外，如果我使用速记语法会发生什么
animation:myAnimation 2s 1s forwards;
在支持animation但不支持animation animation-fill-mode浏览器上？
非常感谢！
如果是我，我会尝试选择更简单的替代方案 – 如果可能的话。 我会降级我的实现，以便我只使用通常接受的内容。 稍后，当该function得到更广泛的支持时，我会考虑实现它。 我很少考虑使用一种function， This is an experimental technology在文档页面上播放This is an experimental technology – 但是我可能会被归类为无聊:)
在您的示例中，您可以获得与animation-fill-mode:forwards相同的结果animation-fill-mode:forwards通过最初定义元素的结束状态并使用链式动画（如果需要在操作之前延迟）来 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; } just a test
现在，较慢的浏览器可能会闪烁您的初始元素状态，然后再将它们隐藏起来。 但根据我的经验，我只在非常旧的机器和有大量css渲染的页面上看到过这种情况。
显然上面的确会使你的css更加膨胀（因为你必须复制样式） ，并且在处理复杂的动画时会更复杂。 然而：
- 它应该适用于任何动画情况。
- 它将避免使用JavaScript （除了$（）。fadeIn后备） 。
- 它适用于所有支持CSS动画的浏览器。
- 您不会冒JS和CSS变得不同步的风险。
关于使用短格式，最好不要为了达到尽可能广泛的浏览器兼容性。 但是，如上面的示例所示，我选择使用短格式，因为它们更清晰，我可以理解不想一直编写（或阅读）冗长的版本。 出于这个原因，我建议使用less来生成你的css：
我不知道任何polyfill …但我会说你应该使用自己的自定义Modernizr测试，对于不支持动画填充模式的浏览器，你应该使用animationEnd事件来触发你的回调和设置不透明度为1（或删除一个类）。
请参阅： CSS3过渡事件
至于速记符号，IE <10不支持动画填充模式属性，我很确定它会破坏整个声明。
仅供参考，这就是我现在如何实施pebbl的答案（这是一个非常聪明的答案）。 我只需要Modernizr的css动画检测。
让我们假设我想滑动并淡化这个div：
Some stuff
首先，我写下动画 与供应商前缀
@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);
演示
如果您需要多次触发动画，只需使用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