CSS3 @keyframe动画的基本用法与常见错误用法

前言

随着CSS3的推出与普及,其各种属性开始被广泛使用。尤其是其动画功能,对于一些简单的动画实现,实在没必要用Javascript去实现,这是@keyframes动画就派上了用场。今天来讲一下@keyframes的一些基本的用法和常见坑。
【本文志于向前端新手普及一些常见错误,如有任何错误,请指正。】


一,基本语法

W3School 有更详细的介绍,这里就不再展开了,还不清楚的同学可以先去了解一下CSS3 @keyframes 规则再往下看。并且需要注意一下@keyframes 和 animation的兼容性问题。对于各种浏览器的兼容情况可以参考下图:

CSS3 @keyframe动画的基本用法与常见错误用法_第1张图片

可以看见当前大部分主流浏览器都支持@keyframes和animation( 就剩下IE9及之前的版本”一枝独秀” 了);另外,IOS safari 8.4和安卓浏览器4.4.4及之前的版本需要加 -webkit- 前缀兼容


二,常见坑

1,@keyframes 不能实现突变的状态变化

@keyframes 的原理是把样式的从一个状态,慢慢转变为另一个状态。例如:

/*
* div 在2s内下移200px
*/
div {
    position:absolute;
    animation: move 2s;
}
@keyframes move {
    from { top:0; }
    to   { top:200px;}
}

上述div的移动,不是一步完成的,而是中间有很多个状态,从top:1px , 到top :2px , top: 3px ……最终到 top:200px; 这样一系列状态组成而构成的动画。
所以,如果不存在渐变的状态,是无法用@keyframes构成动画的,例如:

div {
    animation: apear 2s;
}
@keyframes appear {
    from { display:none; }
    to   { display:block;}
}

我们知道,display:none;是将div消失并且不占空间,display:block;则是将div展现存在并占据空间。但上述代码是无法使div拥有 2秒内从消失到展现 的渐变动画的,因为display:none;和display:block;是突变的,是从display:none;一下子到display:block;状态的。所以@keyframes无法实现。
同理其他种类的突变属性也无法拥有@keyframes的动画效果,@keyframes 只存在于渐变属性当中,例如各种width, height, opacity等属性值为数值的属性。


2,@keyframes会增添/覆盖属性

/*
* div 在2s内下移200px
*/
div {
    position:absolute;
    top:0px;
    animation: move 2s;
}
@keyframes move {
    from { top:20px; }
    to   { top:200px;}
}

覆盖属性:如上述情况,div初始状态是top:0; @keyframes首先用top:20px覆盖原属性(top:0;),然后再启动@keyframes功能。 所以我们看到的效果是:div突然瞬间下降20px,然后在2秒内下降至指定位置(top:200px;)。

/*
* div 在2s内下移200px
*/
div {
    position:absolute;
    top:0px;
    animation: move 2s;
}
@keyframes move {
    from { top:0px; }
    to   { bottom:0px;}
}

添加属性:上述代码初始状态是div在顶部,最后状态是div 在底部,但像上面这样写 并不会出现div 从顶部慢慢下滑至底部的动画,而是div突然就出现在了底部。这是因为初始状态为div{ top:0px ;},但最终状态却不会是 div { bottom:0px; } , 而是 div { top:0px; bottom: 0px; } ,这样就会出现明显的错误,达不到我们预想的效果。

小结: @keyframes 中的属性,如果div本身存在该属性,就被@keyframes 中的属性给覆盖掉。 如果div本身不存在该属性,则为div增添该属性。


3 动画性能优化

当你在使用@keyframes 动画时,如果做的动画比较复杂的话,就会发现一个问题,那就是不流畅掉帧,可能在PC端还不是很明显,但在移动端你就会发现严重地掉帧。这是因为,如果@keyframes 改变的属性是与layout相关的话,就会触发重新布局,导致渲染和绘制的时间会更加地长。 所以,我们应该尽可能地使用不会触发重新布局的属性完成我们的动画。

  • 触发重新布局的属性有: width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。应该尽量规避使用。
  • 不会出发重新布局的属性有:transform(其中的translate, rotate, scale), color, background等。应该尽量用这些去取代。

三,已知的BUG

  1. iOS 6.1及以下不支持伪元素动画。iOS 7和更高的版本的伪元素动画会些问题。
  2. Firefox 不支持@keyframes 在内联元素的使用。
  3. 在Chorme中,如果使用了steps(x , start) ,animation-fill-mode backwards将会出错。如例子
  4. 在IE10和IE11中,@keyframes不能在媒体查询@media内使用。

参考文献

1,Can I use animation
2,CSS3 @keyframes 规则
3,css属性的选择对动画性能的影响

你可能感兴趣的:(css3,动画,CSS,CSS3)