过度、变形和动画

第一部分、过度（transition）

CSS3提供了强大的过渡属性，它可以在不使用Flash动画或者JavaScript脚本的情况下，为元素从一种样式转变为另一种样式时添加效果，例如渐显、渐弱、动画快慢等。

1.transition-property属性

transition-property 属性用于指定应用过渡效果的CSS属性的名称。
基本语法格式如下：

transition-property: none | all | property;

2.transition-duration属性

transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。

基本语法格式如下：

transition-duration:time;

3.transition-timing-function属性

transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease“。

基本语法格式如下：

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

4.transition-delay属性

transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。
基本语法格式如下：

transition-delay:time;

• 正数：过渡动作会延迟触发。
• 负数：过渡动作会从该时间点开始，之前的动作被截断。

5.transition属性

transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。

基本语法格式如下：

transition：property duration timing-function delay;

注意：

• 使用transition属性设置多个过渡效果时，