1，使用调速函数控制过渡效果的速度曲线（加速，减速等）
使用调速函数可以设置过渡效果的速度曲线，从而实现过渡效果随着时间来改变其速度。比如：开始很慢然后加速或者开始很快然后减速。
（1）css3定义了如下的调速函数：
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ea 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ea-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ea-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ea-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
（2）调速函数的使用
使用时只需要把调速函数跟在过渡属性的时间参数后面。如果不填的话则使用默认调速函数（ea）
transition: opacity 10s ea-in-out;
（3）使用样例1：
下面通过样例演示各种调速函数的效果certain的用法区别。鼠标移入方框，方框内的方块会向右移动，同时方块会旋转，边角变圆角，背景色和文字颜色也在改变。这些样式的改变都会有过渡效果，同时由于使用不同的调速函数，过渡的快慢也是有区别的。
<!doctype html><html lang="en"> <head> <title>hangge.com</title> <style> .trans_box { padding: 20px; *zoom:1; } .trans_list { width: 10%; height: 64px; margin:10px 0; 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; } .ea { -webkit-transition: all 4s ea; -moz-transition: all 4s ea; -o-transition: all 4s ea; transition: all 4s ea; } .ea_in { -webkit-transition: all 4s ea-in; -moz-transition: all 4s ea-in; -o-transition: all 4s ea-in; transition: all 4s ea-in; 联系电话英文 } .ea_out { -webkit-transition: all 4s ea-out; -moz-transition: all 4s ea-out; -o-transition: all 4s ea-out; transition: all 4s ea-out; } .ea_in_out { -webkit-transition: all 4s ea-in-out; -moz-transition: all 4s ea-in-out; -o-transition: all 4s ea-in-out; transition: all 4s ea-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><div id="transbox" class="trans_box"> <div class="trans_list ea">ea<br>(default)</div> <div class="trans_list ea_in">ea-in</div> <div class="trans_list ea_out">ea-out</div> <div class="trans_list ea_in_out">ea-in-out</div> <div class="trans_list linear">linear</div></div></html>（4）使用样例2：
下面通过对柱状图的宽度改变过渡，演示不同调速函数的效果区别。
<!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: ea;}#div3 {transition-timing-function: ea-in;}#div4 {transition-timing-function: ea-out;}#div5 {transition-timing-function: ea-in-out;} /* firefox 4: */#div1 {-moz-transition-timing-function: linear;}#div2 {-moz-transition-timing-function: ea;}#div3 {-moz-transition-timing-function: ea-in;}#div4 {-moz-transition-timing-function: ea-out;}#div5 {-moz-transition-timing-function: ea-in-out;} /* safari and chrome: */#div1 {-webkit-transition-timing-function: linear;}#div2 {-webkit-transition-timing-function: ea;}#div3 {-webkit-transition-timing-function: ea-in;}#div4 {-webkit-transition-timing-function: ea-out;}#div5 {-webkit-transition-timing-function: ea-in-out;} /* opera: */#div1 {-o-transition-timing-function: linear;}#div2 {-o-transition-timing-function: ea;}#div3 {-o-transition-timing-function: ea-in;}#div4 {-o-tr清明节日记100个字ansition-timing-function: ea-out;}#div5 {-o-transition-timing-function: ea-in-out;} .trans_box:hover div{width:500px;}</style></head><body><感谢信的格式div id="transbox" class="trans_box"> <div id="div2" style="top:150px">ea<br>(default)</div> <div id="div3" style="top:200px">ea-in</div> <div id="div4" style="top:250px">ea-out</div> <div id="div5" style="top:300px">ea-in-out</div> <div id="div1" style="top:100px">linear</div></div></body></html>2，为过渡增加延时
过渡属性还可以添加一个可选的延时，用以将过渡的开始推迟一段时间。下面是一个等待1秒的例子。
延时1秒
<!doctype html><html lang="en"> <head> <title>hangge.com</title> <style> .trans_box3 { padding: 20px; *zoom:1; } .trans_box3 div{ width:100px; height:50px; background:#2d9900; color:white; font-weight:bold; -webkit-transition: all 2s ea-out 1s; -moz-transition: all 2s ea-out 1s; -o-transition: all 2s ea-out 1s; transition: all 2s ea-out 1s; } .trans_box3:hover div { width:500px; } </style></head><div class="trans_box3"> <div>延时1猪肉的做法秒</div></div></html>到此这篇关于css3 对过渡(transition)进行调速以及延时的文章就介绍到这了,更多相关css3 过渡调速及延时内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！
本文发布于:2023-04-03 20:26:40，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/fe3c2befbd21d13ab98cb9f98ef47c5e.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：CSS3 对过渡(transition)进行调速以及延时.doc
本文 PDF 下载地址：CSS3 对过渡(transition)进行调速以及延时.pdf
| 留言与评论（共有 0 条评论） |
