css中动画之transition

css动画：css属性过渡实现动画

css过渡就是平滑改变css属性值，元素样式从原始样式逐渐过渡到另外一个样式。
1.过渡css属性
2.过渡时长
css的过渡使用transition属性来定义，transition属性的基础语法如下：
transition: property duration timing-function delay;

transition 属性可以实现简单动画，实现更加复杂的动画效果，可以使用css3中的animation和@keyframes

property：过渡的css属性的名称，三种取值：
1.none，没有属性会获得过渡效果。
2.all，默认值，所有的属性都会获得过渡效果。
3.property，定义应用过渡效果的css属性名称列表。

duration，定义过渡花费时间
time值，以秒或毫秒计，默认是0，意味着没有效果。

timing-function，规定过渡效果的时间曲线，允许取值有6种
2.linear，规定匀速过渡效果。相当于cubic-bezier(0,0,1,1)
3.ease，是默认值，慢速开始，然后变快，然后慢速结束的过渡效果。相当于cubic-bezier(0.25,0.1,0.25,1)
4.ease-in：慢速开始的过渡效果。相当于cubic-bezier(0.42,0,1,1)
5.ease-out：慢速结束的过渡效果，相当于cubic-bezier(0,0,0.58,1)
6.ease-in-out：慢速开始和结束，相当于cubic-bezier(0.42,0,0.58,1)
7.cubic-bezier(x1,y1,x2,y2),数值是自己定义的(我会在后面一点说一下)。
8.delay：过渡效果开始前需要等待的时间，以秒或者毫秒计，默认是0。

transition：all可以省去，css属性改变的都会有一个变化的动画，比如width，height，background。

property，timing-function的位置可以任意交换，duration和delay的位置都是先duration在delay前面。