CSS3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的
动画。
transition的语法：transition： transition-property || transition-duration ||
transition-timing-funciton || transition-delay ；
其参数的取值说明如下：
<transition-property>:定义用于过渡的属性；
<transition-duration>:定义过渡过程需要的时间（必选，否则不会产生过渡效果）
<transition-timing-function>:定义过渡的方式；
<transition-delay>:定义开始过渡的延迟时间；
使用transition属性定义一组过渡效果，需要以上四个参数。transition属性可以同时定义
两组或两组以上的过渡效果，组与组之间用逗号分隔。
基于webkit内核的私有属性是：-webkit-transition;
基于gecko内核的私有属性是：-moz-transition;
基于prestot内核的私有属性是：-o-transition;
如下例1：过渡效果
图1：起始效果
图2：结束效果
图1所对应的初始代码如下：
代码1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1214 CSS过渡属性</title>
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width: 100px;
height: 100px;
background-color: orange;
margin: 200px auto;
transition: all 1000ms linear 500ms;
-o-transition: all 1000ms linear 500ms; /*兼容parsto内核*/
-moz-transition: all 1000ms linear 500ms; /*兼容gecko内核*/
-webkit-transition: all 1000ms linear 500ms; /*兼容webkit内核*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
当给div增加代码2之后，即可实现图2的效果：
代码2：
div:hover{
transform: rotate(60deg);
background-color: red;
}
即是div元素实现颜色的变化和以图形的原点为原心顺时针旋转60度。
1.指定过渡的属性 (transition-property属性)
transition-property的语法：transition-property：none | all | <property> ;
其取值说明如下：
none：表示没有任何CSS属性有过渡效果；
all：为默认值，表示所有的CSS属性都有过渡效果；
<property>：指定一个用逗号分隔的多个属性，针对指定的这些属性有过渡效果。
若将代码1做如下更改，更改之后的代码为代码3：
代码3：
div{
width: 100px;
height: 100px;
background-color: orange;
margin: 200px auto;
transition: background-color 1000ms linear 500ms;
-o-transition: background-color 1000ms linear 500ms; /*兼容parsto内核*/
-moz-transition: background-color 1000ms linear 500ms; /*兼容gecko内核*/
-webkit-transition: background-color 1000ms linear 500ms; /*兼容webkit内核*/
}
此时只有背景色有过渡效果，循序渐进的变化，而其他的效果则没有过渡；
2.指定过渡的时间（transition-duration）
transition-duration属性：用于定义过渡过程所需要的时间。
transition-duration语法：transition-duration:<time>;
其取值说明：
<time>指定一个用逗号分隔的多个时间值，单位是秒(s)或毫秒(ms)。默认值是0，即是看不到过渡效果。
可对代码1进行如下更改为代码4：
代码4：
div{
width: 100px;
height: 100px;
background-color: orange;
margin: 200px auto;
transition: background-color 3000ms linear 500ms;
-o-transition: background-color 3000ms linear 500ms; /*兼容parsto内核*/
-moz-transition: background-color 3000ms linear 500ms; /*兼容gecko内核*/
-webkit-transition: background-color 3000ms linear 500ms; /*兼容webkit内核*/
}
此时过渡时间将会由1s变化为3s。
3.指定过渡延迟时间（transition-delay）：
transition-delay：用于定义过渡的延迟时间；
transition-delay语法：transition-delay:<time>;
其取值说明如下：<time>的取值可以为秒(s)或毫秒(ms)。默认值为0，即是没有时间延迟，立即开始过渡效果。
可将代码1更改为如下的代码5：
代码5：
div{
width: 100px;
height: 100px;
background-color: orange;
margin: 200px auto;
transition: background-color 3000ms linear 2000ms;
-o-transition: background-color 3000ms linear 2000ms; /*兼容parsto内核*/
-moz-transition: background-color 3000ms linear 2000ms; /*兼容gecko内核*/
-webkit-transition: background-color 3000ms linear 2000ms; /*兼容webkit内核*/
}
此时的过渡效果将由500ms的延迟更改为延迟到200ms;
4.指定过渡方式（transition-timing-function）
transition-timing-function属性用于定义过渡的速度曲线，即是过渡方式。
transition-timing-function语法：transition-timing-function: ease | linear | ease-in | ease-out
| ease-in-out | cubiz-bezier(n,n,n,n);
其取值的说明如下：
linear: 表示匀速过渡；
ease: 默认值，表示过渡的速度先慢，再快，最后非常慢；
ease-in: 表示过渡的速度先慢，后越来越快，直至结束；
ease-out: 表示过渡的速度先快，后越来越慢，直至结束；
ease-in-out: 表示过渡的速度在开始和结束时都很慢；
cubic-bezier(n,n,n,n): 自定义贝塞尔曲线的效果，其中的四个参数为从0到1的数字。
如果觉得《CSS3实现过渡效果 (transition)》对你有帮助，请点赞、收藏，并留下你的观点哦！
