FITURE

这只是我学习CSS3 动画的一个笔记，慢慢的会出《记CSS3动画基础（二）》等，毕竟现在很多的浏览器都支持CSS3了。

CSS3 动画分为三大类别：Transitions 、Transforms 、Animations，下面我一一道来（因为浏览器的前缀不同，示例代码中我将统一使用-webkit-）：

CSS3 动画之——CSS3 transition

transition，即过渡，转换的意思，它能使对象的某个属性width,color等，从一个初始状态过渡，转换到另一个目标属性。transiton只是CSS3 过渡（Transitions）的一个简写属性，就好像background是background-color、background-image等的一个简写形式。

因此，CSS3 transition，就是定义一个状态的过渡，它包含四个子属性：transition-property、transition-duration、transition-timing-fuction、transition-delay。

1、transition-property

transition-property，指定transition过渡的属性，比如：background-color、width、margin、all等（CSS3可过渡属性表）。用法：

-webkit-transition-property: background-color;

2、transition-duration

transition-duration，指定transition过渡的时间，单位为秒（s）或者毫秒（ms），如果时间里面出现有小数点，可以省略小数点前面的0，用法：

-webkit-transition-duration: .5s;

3、transition-timing-function

transition-timing-function，指定transition过渡的方式，transition-timimg-fuction过渡方式是按照贝塞尔曲线来计算的，有几个具体的值：linear，ease，ease-in，ease-out，ease-in-out，加上自定义cubic-bezier(number, number, number, number) 具体用法：

-webkit-transition-timing-function:linear;
-webkit-transition-timing-function:cubic-bezier(0.0,0.0,1.0,1.0);

4、transition-delay

transition-duration，指定transition过渡的延时时间，单位为秒（s）或者毫秒（ms），如果时间里面出现有小数点，可以省略小数点前面的0，用法：

-webkit-transition-delay: .5s;

 

下面以一个DEMO背景/宽度过渡为例：

#demo {
width:200px; 
height:50px; 
background:#ccc; 
text-align:center;
}
#demo:hover { 
-webkit-transition:width .8s ease,background-color .8s linear;
width:400px;
background-color:#f60;
}

 

以上的代码就实现了这个效果，有两个个地方需要注意：过渡触发、初始状态以及目标状态。过渡触发，一般可以用CSS的一些伪类，还有js的一些事件触发，还有变换的对象必须有初始，和目标状态。

还有一点是如果有多个属性需要变换，可以用简写逗号隔开就行，结合到transform变换是transition-property一般的值是:all

这就是最基础的CSS3动画transition过渡，That's all