CSS3 transition过渡效果
CSS3 transition过渡效果CSS3 过渡是元素从一种样式逐渐改变为另一种的效果
要实现这一点，必须规定两项内容：
1、规定您希望把效果添加到哪个 CSS 属性上
2、规定效果的时长，如果时长未规定，则不会有过渡效果，因为默认值是 0。
一、CSS3中transition的定义
transition: property duration timing-function delay;
transition 属性是一个简写属性，主要用于设置四个过渡属性：
| 值 | 描述 |
| transition-property | 规定设置过渡效果的 CSS 属性的名称。 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒。默认是 0。 |
| transition-timing-function | 规定速度效果的速度曲线。默认是 "ease"。 |
| transition-delay | 定义过渡效果何时开始。默认是 0。 |
二、CSS3中transition属性介绍
1、transition-property
transition-property是用来指定当元素其中一个属性改变时执行transition效果。
其主要有以下几个值：
(1)、none(没有属 性改 变)；
(2)、all（所有属性改变）这个也是其默认值；
(3)、indent（元素属性名）；
当其值为none时，transition马上停止执行，当指定为all 时，则元素产生任何属性值变化时都将执行transition效果，ident是可以指定元素的某一个属性值。
常用应用过渡的元素
|
CSS Property |
What Changes |
|
background-color |
Color |
|
background-image |
Only gradients |
|
background-position |
Percentage, length |
|
border-bottom-color |
Color |
|
border-bottom-width |
Length |
|
border-color |
Color |
|
border-left-color |
Color |
|
border-left-width |
Length |
|
border-right-color |
Color |
|
border-right-width |
Length |
|
border-spacing |
Length |
|
border-top-color |
Color |
|
border-top-width |
Length |
|
border-width |
Length |
|
bottom |
Length, percentage |
|
color |
Color |
|
crop |
Rectangle |
|
font-size |
Length, percentage |
|
font-weight |
Number |
|
grid-* |
Various |
|
height |
Length, percentage |
|
left |
Length, percentage |
|
letter-spacing |
Length |
|
line-height |
Number, length, percentage |
|
margin-bottom |
Length |
|
margin-left |
Length |
|
margin-right |
Length |
|
margin-top |
Length |
|
max-height |
Length, percentage |
|
max-width |
Length, percentage |
|
min-height |
Length, percentage |
|
min-width |
Length, percentage |
|
opacity |
Number |
|
outline-color |
Color |
|
outline-offset |
Integer |
|
outline-width |
Length |
|
padding-bottom |
Length |
|
padding-left |
Length |
|
padding-right |
Length |
|
padding-top |
Length |
|
right |
Length, percentage |
|
text-indent |
Length, percentage |
|
text-shadow |
Shadow |
|
top |
Length, percentage |
|
vertical-align |
Keywords, length, percentage |
|
visibility |
Visibility |
|
width |
Length, percentage |
|
word-spacing |
Length, percentage |
|
z-index |
Integer |
|
zoom |
Number |
2、transition-duration
transition-duration: time;
transition-duration是用来指定元素 转换过程的持续时间，取值：<time>为数值，单位为s（秒）,可以作用于所有元素，包括:before和:after伪元素。默认值是 0，意味着不会有效果。
3、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 之间的数值。 |
4、transition-delay
transition-delay: time;
transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，取 值：<time>为数值，单位为s（秒），它的使用和transition-duration极其相似，也可以作用于所有元素，包 括:before和:after伪元素。 默认大小是”0″，也就是变换立即执行，没有延迟。
有时我们不只改变一个CSS效果的属性,而是想改变两个或者多个CSS属性的transition效果，那么我们只要把几个transition的 声明串 在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：transition-delay与 transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定。
三、CSS3 transition过渡效果实例
<style>
.trans_list {
width: 10%;
height: 64px;
margin:10px 0;
background-color:#486AAA;
color:#fff;
text-align:center;
}
.ease {
transition: all 4s ease;
}
.ease_in{
transition: all 4s ease-in;
}
.trans_box:hover{
margin-left:89%;
background-color:#BECEEB;
color:#333;
border-radius:25px;
transform: rotate(360deg);
}
</style>
<li id="transBox" class="trans_box">
<li class="trans_list ease">ease</li>
<li class="trans_list ease_in">ease-in</li>
<li class="trans_list ease_out">ease-out</li>
<li class="trans_list ease_in_out">ease-in-out</li>
<li class="trans_list linear">linear</li>
</li>
.trans_list
<!DOCTYPE html>
<html>
<head>
<style>
li
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
li:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
</head>
<body>
<li>请把鼠标指针放到黄色的 li 元素上，来查看过渡效果。</li>
<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>
</body>
</html>