CSS过渡
过渡的属性和描述
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性 |
| transition-property | 规定应用过渡的 CSS 属性的名称 |
| transition-duration | 定义过渡效果花费的时间。默认是 0 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease” |
| transition-delay | 规定过渡效果何时开始。默认是 0 |
transition-property 属性
transition-property属性指定CSS属性的nametransition效果（transition效果时将会启动指定的CSS属性的变化）
具有的值和描述:
| 值 | 描述 |
|---|---|
| none | 没有属性会获得过渡效果 |
| all | 所有属性都将获得过渡效果 |
| property | 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔 |
示例
将鼠标悬停在一个div元素上，逐步改变表格的宽度和颜色：
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition-property</title>
<style>
div
{
width:100px;
height:100px;
background:red;
transition-property: width,background;
transition-duration: 1s;
-webkit-transition-property: width,background; /* Safari */
-webkit-transition-duration: 1s; /* Safari */
}
div:hover
{
width:300px;
background:blue;
}
</style>
</head>
<body>
<div></div>
<p>鼠标移动在块上查看动画效果.</p>
</body>
</html>
效果
transition-duration 属性
transition-duration 属性规定完成过渡效果需要花费的时间（以秒或毫秒计）
可以使用的值和描述
| 值 | 描述 |
|---|---|
| time | 规定完成过渡效果需要花费的时间（以秒或毫秒计） 默认值是 0，如果不做修改,意味着不会有效果。 |
示例
花3秒切换效果
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition-duration</title>
<style>
div
{
width:100px;
height:100px;
background:red;
transition-property:width;
transition-duration:3s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:3s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>将鼠标移动到块上查看动画效果.</p>
</body>
</html>
示例
transition-timing-function 属性
transition-timing-function具有的值和描述
| 值 | 描述 |
|---|---|
| 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 之间的数值。 |
示例
过渡效果以同样的速度从开始到结束：
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>transition-timing-function 属性</title>
<style>
div
{
width:100px;
height:100px;
background:red;
transition:width 2s;
transition-timing-function:linear;
/* Safari */
-webkit-transition:width 2s;
-webkit-transition-timing-function:linear;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>将鼠标移动至块上查看过渡动画效果.</p>
</body>
</html>
效果
指定速度曲线立方贝塞尔曲线函数：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:50px;
background:red;
color:white;
font-weight:bold;
transition:all 2s;
-webkit-transition:all 2s; /* Safari */
}
#div1 {
transition-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {
transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {
transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {
transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {
transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari */
#div1 {
-webkit-transition-timing-function: cubic-bezier(0,0,0.25,1);}
#div2 {
-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {
-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {
-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {
-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}
div:hover
{
background:green;
width:300px;
}
</style>
</head>
<body>
<div id="div1" style="top:100px">linear</div>
<div id="div2" style="top:150px">ease</div>
<div id="div3" style="top:200px">ease-in</div>
<div id="div4" style="top:250px">ease-out</div>
<div id="div5" style="top:300px">ease-in-out</div>
<p>将鼠标移动至块上查看过渡动画效果.</p>
</body>
</html>
效果
transition-delay 属性
示例
等待2秒前切换效果开始：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div
{
width:100px;
height:100px;
background:red;
transition-property:width;
transition-duration:5s;
transition-delay:2s;
/* Safari */
-webkit-transition-property:width;
-webkit-transition-duration:5s;
-webkit-transition-delay:2s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
<p>将鼠标移动至块上查看过渡动画效果.</p>
<p><b>注意:</b> 该过渡效果开始前会停顿2s.</p>
</body>
</html>
效果
transition
简写属性，用于在一个属性中设置四个过渡属性
语法 :transition: property duration timing-function delay;