CSS3 动画属性

transition过渡

transition是CSS3动画属性之一，还是很容易上手的，注意的的是，过度需要事件的触发，
参考MDN的解释，transition CSS 属性是一个简写属性，用于 transition-property, transition-duration, transition-timing-function, 和 transition-delay。
初始值：

transition-delay: 0stransition-duration: 0stransition-property: alltransition-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 背景天蓝变为红色