CSS3 动画属性

transition过渡

transition是CSS3动画属性之一，还是很容易上手的，注意的的是，过度需要事件的触发，

参考MDN的解释，transition CSS 属性是一个简写属性，用于 transition-property, transition-duration, transition-timing-function, 和 transition-delay。

初始值：

transition-delay: 0s
transition-duration: 0s
transition-property: all
transition-timing-function: ease

transition-property:

none(没有属性改变)；all（所有属性改变）；indent（元素属性名）。

indent 可以写自己想改变的css属性,例如width，color，可以有很多东西，用到的时候可以具体查

transition-duration

这个是过度的持续时间，单位可以是s或者ms 例如2s .5s(省略小数点前面0)

transition-delay

这个是开始过渡的延迟时间 , 在缩写中，是第二个时间，例如transition: margin-left 4s 1s;

过渡4s 延迟1s执行;

transition-timing-function

这个是过渡快慢变化，

1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

一般用ease-in-out感觉效果比较好

transition 简写形式，参考MDN

/* Apply to 1 property */
/* property name | duration */
transition: margin-left 4s;

/* property name | duration | delay */
transition: margin-left 4s 1s;

/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-left 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

demo参考代码

<div id="test1"></div>
//style
#test1{
background:#abcdef;
width: 900px;
height: 600px;
margin: 0 auto;
}
#test1:hover{
transition:all 2s ease-in-out;
width: 200px;
height: 200px;
background:red;
}

非常简单的效果，鼠标放上去的时候，长宽900 600变为200 200 背景天蓝变为红色