CSS3对过渡transition进行调速以及延时的示例

tangjin

作者

这篇文章主要介绍CSS3对过渡transition进行调速以及延时的示例，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

1，使用调速函数控制过渡效果的速度曲线（加速，减速等）

CSS3对过渡transition进行调速以及延时的示例

使用调速函数可以设置过渡效果的速度曲线，从而实现过渡效果随着时间来改变其速度。比如：开始很慢然后加速或者开始很快然后减速。

（1）CSS3定义了如下的调速函数：

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 之间的数值。

（2）调速函数的使用使用时只需要把调速函数跟在过渡属性的时间参数后面。如果不填的话则使用默认调速函数（ease）

transition:opacity10sease-in-out;

（3）使用样例1：下面通过样例演示各种调速函数的效果区别。鼠标移入方框，方框内的方块会向右移动，同时方块会旋转，边角变圆角，背景色和文字颜色也在改变。这些样式的改变都会有过渡效果，同时由于使用不同的调速函数，过渡的快慢也是有区别的。

<!doctypehtml>
<htmllang="en">
<head>
<title>hangge.com</title>
<style>
.trans_box{
padding:20px;

*zoom:1;
}

.trans_list{
width:10%;
height:64px;
margin:10px0;

color:#fff;
text-align:center;
}

.linear{
-webkit-transition:all4slinear;
-moz-transition:all4slinear;
-o-transition:all4slinear;
transition:all4slinear;
}

.ease{
-webkit-transition:all4sease;
-moz-transition:all4sease;
-o-transition:all4sease;
transition:all4sease;
}

.ease_in{
-webkit-transition:all4sease-in;
-moz-transition:all4sease-in;
-o-transition:all4sease-in;
transition:all4sease-in;
}

.ease_out{
-webkit-transition:all4sease-out;
-moz-transition:all4sease-out;
-o-transition:all4sease-out;
transition:all4sease-out;
}

.ease_in_out{
-webkit-transition:all4sease-in-out;
-moz-transition:all4sease-in-out;
-o-transition:all4sease-in-out;
transition:all4sease-in-out;
}

.trans_box:hover.trans_list,.trans_box_hover.trans_list{
margin-left:89%;

color:#333;
-webkit-border-radius:25px;
-moz-border-radius:25px;
-o-border-radius:25px;
border-radius:25px;
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
</style>
</head>
<divid="transBox"class="trans_box">
<divclass="trans_listease">ease<br>(default)</div>
<divclass="trans_listease_in">ease-in</div>
<divclass="trans_listease_out">ease-out</div>
<divclass="trans_listease_in_out">ease-in-out</div>
<divclass="trans_listlinear">linear</div>
</div>
</html>

（4）使用样例2：

下面通过对柱状图的宽度改变过渡，演示不同调速函数的效果区别。

<!DOCTYPEhtml>
<html>
<head>
<style>
div
{
margin:10px0;
width:100px;
height:50px;
background:#2D9900;
color:white;
font-weight:bold;
transition:width2s;
-moz-transition:width2s;/*Firefox4*/
-webkit-transition:width2s;/*SafariandChrome*/
-o-transition:width2s;/*Opera*/
}

#div1{transition-timing-function:linear;}
#div2{transition-timing-function:ease;}
#div3{transition-timing-function:ease-in;}
#div4{transition-timing-function:ease-out;}
#div5{transition-timing-function:ease-in-out;}

/*Firefox4:*/
#div1{-moz-transition-timing-function:linear;}
#div2{-moz-transition-timing-function:ease;}
#div3{-moz-transition-timing-function:ease-in;}
#div4{-moz-transition-timing-function:ease-out;}
#div5{-moz-transition-timing-function:ease-in-out;}

/*SafariandChrome:*/
#div1{-webkit-transition-timing-function:linear;}
#div2{-webkit-transition-timing-function:ease;}
#div3{-webkit-transition-timing-function:ease-in;}
#div4{-webkit-transition-timing-function:ease-out;}
#div5{-webkit-transition-timing-function:ease-in-out;}

/*Opera:*/
#div1{-o-transition-timing-function:linear;}
#div2{-o-transition-timing-function:ease;}
#div3{-o-transition-timing-function:ease-in;}
#div4{-o-transition-timing-function:ease-out;}
#div5{-o-transition-timing-function:ease-in-out;}

.trans_box:hoverdiv
{
width:500px;
}
</style>
</head>
<body>
<divid="transBox"class="trans_box">
<divid="div2"style="top:150px">ease<br>(default)</div>
<divid="div3"style="top:200px">ease-in</div>
<divid="div4"style="top:250px">ease-out</div>
<divid="div5"style="top:300px">ease-in-out</div>
<divid="div1"style="top:100px">linear</div>
</div>
</body>
</html>

2，为过渡增加延时

过渡属性还可以添加一个可选的延时，用以将过渡的开始推迟一段时间。下面是一个等待1秒的例子。延时1秒

<!doctypehtml>
<htmllang="en">
<head>
<title>hangge.com</title>
<style>
.trans_box3{
padding:20px;

*zoom:1;
}

.trans_box3div{
width:100px;
height:50px;
background:#2D9900;
color:white;
font-weight:bold;

-webkit-transition:all2sease-out1s;
-moz-transition:all2sease-out1s;
-o-transition:all2sease-out1s;
transition:all2sease-out1s;
}

.trans_box3:hoverdiv
{
width:500px;
}
</style>
</head>
<divclass="trans_box3">
<div>延时1秒</div>
</div>
</html>

以上是“CSS3对过渡transition进行调速以及延时的示例”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注恰卡编程网行业资讯频道！

阅读全文

发布于 2021-03-17 20:51:20

css3