标签：
语法 transition: property duration timing-function delay ;
transition包含四个属性值，分别为property、duration、timing-function、delay，下面来一一介绍。
一、transition-property
语法 transition-property: none|all|property;
值
|
描述
|
|---|---|
none
|
没有属性会获得过渡效果。
|
all
|
所有属性都将获得过渡效果。
|
property
|
定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。
|
transition-property 属性规定应用过渡效果的 CSS 属性的名称。比如过渡一个背景色时，则设置为
transition-property：background；
二、transition-duration
语法 transition-duration：time；
| 值 | 描述 |
|---|---|
| time |
规定完成过渡效果需要花费的时间（以秒s或毫秒ms计）。 默认值是 0，意味着不会有效果。 |
transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。比如设置过渡的持续时间为3秒，则为transition-duration:3s;
三、transition-timing-function
语法 transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 |
| ease-in | 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。 |
| ease-out | 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
transition-timing-function 属性规定过渡效果的速度曲线。该属性允许过渡效果随着时间来改变其速度。其默认值为ease。
语法 transition-delay: time；
| 值 | 描述 |
|---|---|
| time | 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。 |
IE 10、Firefox、Opera、Chrome 支持 transition 属性。
鼠标悬停于div元素时，背景颜色background-color由黄色变为绿色
html code
<div>transition</div>
css code
div {
background-color: gold;
color: #FFFFFF;
font-family: arial;
font-size: 50px;
width: 300px;
height: 80px;
line-height: 80px;
text-align: center;
margin: 50px auto;
-moz-transition:background-color 1s ease-in-out 1s;
-webkit-transition:background-color 1s ease-in-out 1s;
-o-transition:background-color 1s ease-in-out 1s;
-ms-transition:background-color 1s ease-in-out 1s;
-moz-transition:background-color 1s ease-in-out 1s;
}
div:hover {
background-color: green;
}
效果
鼠标悬停于div元素时，background-color、width、font-size同时过渡变换。
html code
<div>transition</div>
css code
div {
background-color: gold;
color: #FFFFFF;
font-family: arial;
font-size: 50px;
width: 300px;
height: 80px;
line-height: 80px;
text-align: center;
margin: 50px auto;
-moz-transition:background-color 1s ease-in-out 1s,width 1s ease-in-out 1s,font-size 1s ease-in-out 1s;
-webkit-transition:background-color 1s ease-in-out 1s,width 1s ease-in-out 1s,font-size 1s ease-in-out 1s;
-o-transition:background-color 1s ease-in-out 1s,width 1s ease-in-out 1s,font-size 1s ease-in-out 1s;
-ms-transition:background-color 1s ease-in-out 1s,width 1s ease-in-out 1s,font-size 1s ease-in-out 1s;
-moz-transition:background-color 1s ease-in-out 1s,width 1s ease-in-out 1s,font-size 1s ease-in-out 1s;
}
div:hover {
background-color: green;
width:150px;
font-size: 30px;
}
效果
标签：
原文地址：http://www.cnblogs.com/weihf/p/4874249.html
