CSS3动画填充模式polyfill [英] CSS3 animation-fill-mode polyfill
问题描述
前言
让我们假设 div 是从 opacity：0; 到 opacity：1; 并且我想保留 opacity：1; 结束。
这是 animation-fill-mode：forward; 的用法。
@keyframes myAnimation {
从{opacity：0; }
to {opacity：1; }
}
div {
opacity：0;
animation-name：myAnimation;
animation-delay：1s;
animation-duration：2s;
animation-fill-mode：forward;
}
< div>只是一个测试< / div>
- 注意1：我在此未包含供应商前缀以简化
- 注意2：这只是一个示例，请不要回复
有些事情需要了解 h1>
在此答案我看到Chrome 16+，Safari 4+，Firefox 5 +支持 animation-fill-mode 。
但动画单独支持 Chrome 1 +和歌剧。因此，即使填充模式， Modernizr 的常规测试也可能返回正值，
目标 animation-fill-mode 我在Modernizr上添加了一个新测试：
Modernizr.addTest（'animation-fill-mode'，function（）{
return Modernizr.testAllProps（'animationFillMode'） ;
}）;
现在我有一个 .no-animation-fill-mode class for CSS and Modernizr.animationFillMode for JavaScript。
我也读过 CSS3动画规格：
在文档样式表中指定的动画将从
文档加载开始
最后，问题
是否可以在精确秒数运行一个简单的jQuery函数动画结束
$（document）.ready（function（）{
if .animation）{
$（'div'）。delay（1000）.fadeIn（2000）;
} else if（！Modernizr.animationFillMode）{
$（'div'）。 delay（3000）.show（）;
}
}）;
在CSS中：
.no-animation-fill-mode div {
animation-iteration-count：1;
}
/ *或只是动画：myAnimation 2s 1s 1;对于每个人* /
或者有任何已知的polyfill c $ c> animation-fill-mode ？
速记语法
animation：myAnimation 2s 1s forward;支持动画的浏览器上的
非常感谢！
如果是我，我会尝试选择更简单的选择 - 如果可能的话。我会降级我的实现，使我只使用通常接受的。后来，当功能得到更广泛的支持时，我想想实现它。我很少考虑使用这是一个实验性的技术在文档页面上的广播 - 但后来也许我应该被归类为无聊的功能：）
在你的例子中，你可以通过定义元素的结束状态来实现与 animation-fill-mode :forward 链接动画（如果需要动作之前的延迟）：
@keyframes waitandhide {
from {opacity：0; }
to {opacity：0; }
}
@keyframes显示{
从{opacity：0; }
to {opacity：1; }
}
div {
opacity：1;
animation：waitandhide 2s 0s，show 2s 2s;
}
< div>只是测试< / div>
现在可能的是，较慢的浏览器可能会闪烁你的初始元素状态，然后再隐藏它们。但在我的经验，我只看到这个在很老的机器和页面有大量的CSS渲染。
显然上面的是膨胀你的CSS更多（因为您必须重复样式），并且在处理复杂动画时会更复杂。但是：
- 它几乎适用于任何动画情况。
- 它将在支持css动画的所有浏览器上正常工作。
- 您不会遇到JS和CSS变得不同步的风险。
关于使用短格式它最好不要，如果你想要尽可能广泛的浏览器兼容性。然而，如我在上面的例子所示，我选择使用短格式，因为它们更清晰，我可以理解不想写入（或读）长期的版本。为此，我建议使用less生成您的css：
http：// radiatorstar。 com / css-keyframes-animations-with-less
Preface
Let's pretend that a div is animated from opacity:0; to opacity:1; and i want to keep opacity:1; after the animation ends.
That's what animation-fill-mode:forwards; does.
@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>
- Note 1: i didn't include the vendor prefixes here to simplify
- Note 2: that's just an example, please don't reply with "just use jQuery fadeIn function" etc.
Some things to know
In this answer i read that animation-fill-mode is supported by Chrome 16+, Safari 4+, Firefox 5+.
But animation alone is supported by Chrome 1+ and Opera too. So a general test with Modernizr may return positive even if fill-mode is not supported.
To target animation-fill-mode i added a new test on Modernizr:
Modernizr.addTest('animation-fill-mode',function(){
return Modernizr.testAllProps('animationFillMode');
});
Now i've a .no-animation-fill-mode class for CSS and Modernizr.animationFillMode for JavaScript.
I also read from CSS3 animations specs that:
an animation specified in the document style sheet will begin at the document load
Finally, the question(s)
Is it ok to run a simple jQuery function at the exact number of seconds the animation ends
$(document).ready(function(){
if(!Modernizr.animation){
$('div').delay(1000).fadeIn(2000);
}else if(!Modernizr.animationFillMode){
$('div').delay(3000).show();
}
});
And in CSS:
.no-animation-fill-mode div {
animation-iteration-count:1;
}
/* or just animation:myAnimation 2s 1s 1; for everyone */
Or is there any known polyfill specific for animation-fill-mode ?
Also, what happens if i use the shorthand syntax
animation:myAnimation 2s 1s forwards;
on browsers supporting animation but not animation-fill-mode ?
Thanks a lot!
If it were me I'd try an opt for the simpler alternative - if possible. I'd downgrade my implementation so that I'm only using what is commonly accepted. Later on, when the feature is more widely supported I then think about implementing it. I rarely consider using a feature that has This is an experimental technology broadcast on documentation pages - but then maybe I should be classed as boring :)
In your example, you could achieve the same result as animation-fill-mode:forwards by defining the end state of your element initially, and using a chained animation (if a delay before the action is needed):
@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>
Now it is possible that slower browsers might flash up your initial element states before hiding them away again. But in my experience I've only seen this on very old machines and for pages that have a huge amount of css to render.
Obviously the above does bloat your css a bit more (as you have to duplicate styles), and it would be more complicated when dealing with complex animations. However:
- It should work for pretty much any animation situation.
- It would avoid the need for JavaScript (save for the $().fadeIn fallback).
- It will work on all browsers that support css animation.
- You don't run the risk of JS and CSS being/becoming unsynchronised.
With regard to using short-forms it would be best not to if you want to go for as wide reaching browser compatibility as possible. However, as shown in my examples above I have opted for using short-forms because they hold more clarity and I can understand not wanting to write (or read) the long-winded versions all the time. For this reason I would recommend using less to generate your css:
http://radiatingstar.com/css-keyframes-animations-with-less
这篇关于CSS3动画填充模式polyfill的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
