42. CSS3 transition

早期在 Web 中要实现动画效果，都是依赖于 JavaScript 或 Flash 来完成。但在 CSS3 中新增加了一个新的模块transition，它可以通过一些简单的 CSS 事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变 CSS 的属性值。

在 CSS 中创建简单的过渡效果可以从以下几个步骤来实现：

1. 在默认样式中声明元素的初始状态样式；
2. 声明过渡元素最终状态样式，比如悬浮状态；
3. 在默认样式中通过添加过渡函数，添加一些不同的样式。

CSS3 的过度 transition 属性是一个复合属性，主要包括以下几个子属性：

• transition-property：指定过渡或动态模拟的 CSS 属性；
• transition-duration：指定完成过渡所需的时间；
• transition-timing-function：指定过渡函数；
• transition-delay：指定开始出现的延迟时间；

先来看 transition-property 属性

transition-property用来指定过渡动画的 CSS 属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的 CSS 属性主要有：

特别注意：当transition-property属性设置为all时，表示的是所有中点值的属性。

用一个简单的例子来说明这个问题：

假设你的初始状态设置了样式 width、height、background，当你在终始状态都改变了这三个属性，那么all代表的就是 width、height 和 background。如果你的终始状态只改变了 width 和 height 时，那么all代表的就是 width 和 height。