日期:2014-05-17  浏览次数:20847 次

CSS3 动画属性(备忘)

其实用CSS3实现动画效果

主要涉及到3个CSS3属性:transition,animation 和 transform


transition 

CSS3过渡属性,通过transition指定css属性,当该属性的值发生变化时,就会产生流畅的过渡效果。

transition主要包含四个属性值,分别为:
执行变换的属性:transition-property
变换延续的时间:transition-duration
在延续时间段,变换的速率变化transition-timing-function
变换延迟时间transition-delay

语法:

transition: property duration timing-function delay;

样式写法如下:

-moz-transition: all 0.5s ease-in 1s; 
-webkit-transition: all 0.5s ease-in 1s; 
-o-transition: all 0.5s ease-in 1s; 
transition: all 0.5s ease-in 1s;

如果需要对不同属性实现不同的动画效果: 

-moz-transition: background 0.5s ease-in,color 0.3s ease-out;   
-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;   
-o-transition: background 0.5s ease-in,color 0.3s ease-out;   
transition: background 0.5s ease-in,color 0.3s ease-out;

更多transition介绍,请看CSS3的transition属性


浏览器支持:




animation

这个属性十分强大,不需要任何JavaScript代码,就能实现循环的动画效果。

属性如下:

animation-name          //动画的名称。
animation-duration      //