[CSS]-10-过度功能
引言
这篇文章介绍css3提供的新特性"过度功能"，使用这个功能，能够实现简单的动态效果。
文章目录
0×1.平滑过度
利用平滑过度功能，能够实现简单的动态效果，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>平滑过度实例</title>
<style type="text/css">
#d1{
width: 250px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: pink;
color: black;
<!--设置d1平滑过度包含的属性margin-left、background-color以及color，如果想设置所有属性直接用all-->
transition-property: margin-left,background-color,color;
<!--设置平滑过度时间2秒-->
transition-duration: 2s;
}
<!--当鼠标放在这个div上时，触发平滑过度效果，向右移动60px，背景颜色变为绿色，字体颜色变为白色，这一系列变动在2秒内完成-->
#d1:hover{
margin-left: 60px;
background-color: green;
color: white;
}
#d2{
width: 20px;
height: 20px;
background-color: blue;
<!--设置d2平滑过度包含所有属性-->
transition-property: all;
transition-duration: 2s;
}
<!--当鼠标放在这个div上时，触发平滑过度效果，在2秒内d2长度变成250px，背景色变为green-->
#d2:hover{
width: 250px;
background-color: green;
}
</style>
</head>
<body>
<div id="d1">www.qingsword.com</div>
<br>
<div id="d2"></div>
</body>
</html>
显示效果：
Ps：如果不设置transition-duration属性，变化将是一瞬间完成的；
0×2.设置过度速率
css3提供了一个transition-timing-function属性，用来调整过度速率，当过渡效果运行时，元素样式从初始状态过渡到终止状态时速度由快到慢，这个属性提供的几个参数如下：
ease 默认值，元素样式从初始状态过渡到终止状态时速度由快到慢。等同于贝塞尔曲线(0.25, 0.1,0.25, 1.0)；
linear 元素样式从初始状态过渡到终止状态速度是恒速。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)；
ease-in 元素样式从初始状态过渡到终止状态时，速度越来越快，呈一种加速状态。等同于贝塞尔曲线(0.42, 0,1.0, 1.0)；
ease-out 元素样式从初始状态过渡到终止状态时，速度越来越慢，呈一种减速状态。等同于贝塞尔曲线(0, 0, 0.58,1.0)；
ease-in-out 元素样式从初始状态过渡到终止状态时，先加速，再减速。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)；
除了这些设定好的值之外，还能使用cubic-bezier(p0,p1,p2,p3)方法，这个方法接收四个参数 p0，p1，p2，p3，值在 0~1 之间，值越接近1速度越慢。
另外，transition-timing-function属性还能设定跳跃式过度，属性值为：steps(n,type)；第一个值表示跳跃几次，第二个值可以是start或end，可选值。表示开始时跳跃，还是结束时跳跃。
下面用一个实例来演示一下这个属性的功能：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>过度速率实例</title>
<style type="text/css">
#d1{
width: 250px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: pink;
color: black;
transition-property: all;
transition-duration: 2s;
<!--由快到慢过度-->
transition-timing-function: ease-in-out;
}
#d1:hover{
margin-left: 80px;
background-color: green;
color: white;
}
#d2{
width: 20px;
height: 20px;
background-color: blue;
transition-property: all;
transition-duration: 2s;
<!--两端慢，中间快-->
transition-timing-function: cubic-bezier(0.65, 0.17, 0.15, 0.99);
}
#d2:hover{
width: 250px;
background-color: green;
}
#d3{
width: 20px;
height: 20px;
background-color: yellow;
transition-property: all;
transition-duration: 2s;
<!--分6段跳跃式过度-->
transition-timing-function: steps(6);
}
#d3:hover{
width: 250px;
background-color: green;
}
</style>
</head>
<body>
<div id="d1">www.qingsword.com</div>
<br>
<div id="d2"></div>
<br>
<div id="d3"></div>
</body>
</html>
显示效果：
0×3.设置过度延迟
过度延迟，能够分别设置在设定的过度时间内，每个过度标签延迟多少秒开始过度，请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>过度延迟实例</title>
<style type="text/css">
#d1{
width: 250px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: pink;
color: black;
<!--分别指定过度属性-->
transition-property: margin-left,background-color,color;
transition-duration: 4s;
<!--每个参数对应上面指定的过度属性，鼠标移动到这个div上后，延迟2秒开始移动，此时过度总时间4秒倒计时开始，再过了2秒背景开始过度到绿色，再过1秒字体开始过度到白色，也就是说，留给背景过度到绿色的时间是2秒，留给字体过度到白色的时间是1秒-->
transition-delay: 2s,4s,5s;
}
#d1:hover{
margin-left: 80px;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div id="d1">www.qingsword.com</div>
</body>
</html>
显示效果：
0×4.transition简写形式
除了像上面那样将每个子属性都写出来外，transition属性还能直接将所有的属性值都写在单独的属性里，语法格式如下：
transition: property duration timing-function delay;
请看下面的实例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>过度简写实例</title>
<style type="text/css">
#d1{
width: 250px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: pink;
color: black;
<!--d1设置过度效果包含所有属性，过度时间2秒，过度速率由慢变快，过度延迟1秒，即鼠标移动到d1上1秒后才开始移动-->
transition: all 2s ease-in 1s;
}
#d1:hover{
margin-left: 80px;
background-color: green;
color: white;
}
#d2{
width: 20px;
height: 20px;
background-color: yellow;
<!--能够分别设置每个属性过度参数，用逗号分隔，本例设置d2的宽度属性3秒过度时间，速率默认值，鼠标移动到d2，2秒后开始过度，背景色过度时间10秒，默认速率，延迟0秒，这就意味着鼠标刚放到d2上，d2就开始变色了，不论有多少属性，鼠标移动到标签后，所有属性的延迟倒计时全部启动-->
transition: width 3s ease 2s,background-color 10s ease 0s;
}
#d2:hover{
width: 250px;
background-color: green;
}
</style>
</head>
<body>
<div id="d1">www.qingsword.com</div>
<br>
<div id="d2"></div>
</body>
</html>
显示效果：