CSS3 - 对过渡（transition）进行调速，以及延时

资料来源：网络整理时间：2023/2/14 0:42:39 共计：3596 浏览

1，使用调速函数控制过渡效果的速度曲线（加速，减速等）使用调速函数可以设置过渡效果的速度曲线，从而实现过渡效果随着时间来改变其速度。比如：开始很慢然后加速或者开始很快然后减速。
（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）

1	`transition: opacity` `10s ease-in-out;`

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 <!doctype html> <html lang="en"> <head> <title>hangge.com</title> <style> .trans_box { padding: 20px; background-color: #f0f3f9; *zoom:1; } .trans_list { width: 10%; height: 64px; margin:10px 0; background-color:#2D9900; color:#fff; text-align:center; } .linear { -webkit-transition: all 4s linear; -moz-transition: all 4s linear; -o-transition: all 4s linear; transition: all 4s linear; } .ease { -webkit-transition: all 4s ease; -moz-transition: all 4s ease; -o-transition: all 4s ease; transition: all 4s ease; } .ease_in { -webkit-transition: all 4s ease-in; -moz-transition: all 4s ease-in; -o-transition: all 4s ease-in; transition: all 4s ease-in; } .ease_out { -webkit-transition: all 4s ease-out; -moz-transition: all 4s ease-out; -o-transition: all 4s ease-out; transition: all 4s ease-out; } .ease_in_out { -webkit-transition: all 4s ease-in-out; -moz-transition: all 4s ease-in-out; -o-transition: all 4s ease-in-out; transition: all 4s ease-in-out; } .trans_box:hover .trans_list, .trans_box_hover .trans_list { margin-left:89%; background-color:#beceeb; 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> <div id="transBox" class="trans_box"> <div class="trans_list ease">ease<br>(default)</div> <div class="trans_list ease_in">ease-in</div> <div class="trans_list ease_out">ease-out</div> <div class="trans_list ease_in_out">ease-in-out</div> <div class="trans_list linear">linear</div> </div> </html>

（4）使用样例2：
下面通过对柱状图的宽度改变过渡，演示不同调速函数的效果区别。 ease
(default) ease-in ease-out ease-in-out linear

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 <!DOCTYPE html> <html> <head> <style> div { margin:10px 0; width:100px; height:50px; background:#2D9900; color:white; font-weight:bold; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */ -webkit-transition:width 2s; /* Safari and Chrome */ -o-transition:width 2s; /* 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;} /* Firefox 4: */ #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;} /* Safari and Chrome: */ #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:hover div { width:500px; } </style> </head> <body> <div id="transBox" class="trans_box"> <div id="div2" style="top:150px">ease<br>(default)</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> <div id="div1" style="top:100px">linear</div> </div> </body> </html>

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 <!doctype html> <html lang="en"> <head> <title>hangge.com</title> <style> .trans_box3 { padding: 20px; background-color: #f0f3f9; *zoom:1; } .trans_box3 div{ width:100px; height:50px; background:#2D9900; color:white; font-weight:bold; -webkit-transition: all 2s ease-out 1s; -moz-transition: all 2s ease-out 1s; -o-transition: all 2s ease-out 1s; transition: all 2s ease-out 1s; } .trans_box3:hover div { width:500px; } </style> </head> <div class="trans_box3"> <div>延时1秒</div> </div> </html>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：缩放scale()方法 | ·下一条：C# 编写 TensorFlow 人工智能应用