CSS3新特性学习之Transform Transition Animation总结

1.transition介绍

transition是指元素的过渡，指元素从一个状态过渡到另外一个状态。这里的状态要和形态区分开，状态比如说hover,focus,active等都算是元素的状态，所以往往我们会将transition定义在初始状态中，只在最终状态中定义它需要改变的属性，就可以看到过渡效果。

transition的相关属性：

transition-property:需要实现过渡效果的属性名称（比如background-color,width,height,text-shadow等，也可以使用all来应用到所有可过渡的属性）

transition-duration:定义过渡效果持续的时长(用秒进行定义，可以使用.3s、2s或1.5s来定义)

transition-timing-function:定义过渡期间的速度变化(例如ease、linear、ease-in、ease-out、或者cubic-bezier)

transition-delay:可选，用于定义过渡开始前的延迟时间。相反，如果将值设置为负数，可以让过渡效果立即开始，但过度进行到一半会提前结束，同样采用秒来定义。

简写写法：

transition：all 1s ease 0.5s.

当简写时，第一个出现的时间相关的值会被赋予给transition-duration,第二个与时间相关的值则会被赋予transition-delay上，所以以上的顺序也可以变化，不一定严格按照这个顺序来写。

同时实现多个过渡属性：

如果我们存在这样的需求，想要同时实现宽，颜色等属性的过渡，但持续时间不一致，也是可以实现的&#x