-
- pinzaghi 2019-11-21
五种过渡模式，线性过渡或是非匀速过渡
-
截图0赞 · 0采集
-
- NEPTOO 2018-11-20
- mark 实践一下
-
截图0赞 · 0采集
-
- 緣来 2018-02-06
- 摘自阿辉2 其实timing-function还有几个模式： step-start | step-end | steps(6, end) 最后一个蛮有意思的，把动画分几段执行，可以用这个制作一个纯css3的秒表 -webkit-transition:width 2s steps(6, end)，有兴趣的试一下这个模式 秒表思路：在一个div里竖向排列1-9，每隔1秒位置往上走一步（top值）， 使用 -webkit-animation: moveten 1s steps(10, end) infinite;
- 0赞 · 0采集
-
- 慕设计9023129 2017-09-17
- linear：匀速； ease：慢-快-慢； ease-in：慢开始-快结束； ease-out：快开始-慢结束； eas-in-out：慢-快-慢。 timing-function还有几个模式： step-start | step-end | steps(6, end) 最后一个蛮有意思的，把动画分几段执行，可以用这个制作一个纯css3的秒表 -webkit-transition:width 2s steps(6, end)，有兴趣的试一下这个模式 秒表思路：在一个div里竖向排列1-9，每隔1秒位置往上走一步（top值）， 使用 -webkit-animation: moveten 1s steps(10, end) infinite;
- 0赞 · 0采集
-
- 慕神7509951 2016-07-29
- linear：匀速； ease：慢-快-慢； ease-in：慢-快； ease-in-out：慢-（）-慢； eas-in-out：慢-快-慢。
- 1赞 · 2采集
-
- Mooc小智 2016-04-29
- /**从一个效果平滑过度到另一个效果 参数说明:过度属性值 时间**/ -webkit-transition:background-color 3s,width 3s,height 3s;
- 0赞 · 0采集
-
- 背着行囊独自流浪 2016-04-01
- <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> div{ width: 100px; height:100px; color: white; background-color: orange; margin-top: 20px; } div:hover{ width: 99%; } .linear{ -webkit-transition: width 3s linear ; } .ease{ -webkit-transition: width 3s ease; } .ease-in{ -webkit-transition: width 3s ease-in; } .ease-out{ -webkit-transition: width 3s ease-out; } .ease-in-out{ -webkit-transition: width 3s ease-in-out; } </style> </head> <body> <div class="linear">linear</div> <div class="ease">ease</div> <div class="ease-in">ease-in</div> <div class="ease-out">ease-out</div> <div class="ease-in-out">ease-in-out</div> </body> </html>
- 1赞 · 0采集
-
- qq_疯子_109 2016-03-26
- .block{ width: 400px; height: 300px; margin: 0 auto; background-color: #69c; -webkit-transition: background-color 3s; } .block:hover{ width: 960px; } #bar1{ -webkit-transition: width 5s linear; } #bar2{ -webkit-transition: width 5s ease; } #bar3{ -webkit-transition: width 5s ease-in; } #bar4{ -webkit-transition: width 5s ease-out; } #bar5{ -webkit-transition: width 5s ease-in-out; }
- 0赞 · 0采集
-
- mingling 2016-03-25
- transition 动作出现时间控制 ease慢快慢 linear线性 ease-in 慢-快 ease-out 快-慢 ease-in-out 慢-快-慢
- 0赞 · 0采集
-
- ___qq___ 2016-02-24
- transition:属性,时间，效果（这个可以省略）
- 0赞 · 0采集
-
- 为什么输入的昵称都被占用了 2016-02-16
- transition-timing-function: ease linear ease-in ease-out ease-in-out
- 0赞 · 0采集
-
- andkak 2016-02-04
- :haver 鼠标浮在上面的动作，
- 0赞 · 0采集
-
- andkak 2016-02-04
- transition-timing-fuction
- 0赞 · 0采集
-
- andkak 2016-02-04
- linear ease ease-in ease-out ease-in-out
- 0赞 · 0采集
-
- ygs1990 2016-01-30
- transition第三个属性的五种效果
-
截图0赞 · 0采集
-
- 梦想的天空 2015-11-23
- -webkit-transition: width 5s ease(缓慢进入缓慢退出)/ease-in（缓慢进入）/ease-out（缓慢退出）/liner（匀速）/ease-in-out（缓慢进入缓慢退出与ease不同）
- 0赞 · 1采集
-
- Y_rocky 2015-11-11
- 设置过度效果的时候基本上都是遵循5种显示模式（timing-function）
-
截图0赞 · 0采集
-
- 紫梦天国 2015-11-09
- -webkit-transition: width 5s ease(缓慢进入缓慢退出)/ease-in（缓慢进入）/ease-out（缓慢退出）/liner（匀速）/ease-in-out（缓慢进入缓慢退出与ease不同）
-
截图0赞 · 0采集
-
- qaz2632652 2015-09-08
- case缓慢开始 缓慢结束 case-in开始缓慢 case-out 缓慢结束
- 0赞 · 0采集
-
- qaz2632652 2015-09-08
- linear 匀速
- 0赞 · 0采集
-
- zhoumengxue 2015-08-27
- 同一个类，不同的ID
- 0赞 · 0采集
-
- 梧桐_细雨 2015-08-11
- ease与ease-in-out的去区别： ease：规定慢速开始，然后变快，然后慢速结束的过渡效果。 ease-in-out：规定以慢速开始和结束的过渡效果。 肉眼看不出有太大的区别，只要明白他们两在中间那段的速度快慢有些差别就好。
- 0赞 · 1采集
-
- 桥风L 2015-07-26
- -webkit-transition: width 5s ease(缓慢进入缓慢退出)/ease-in（缓慢进入）/ease-out（缓慢退出）/liner（匀速）/ease-in-out（缓慢进入缓慢退出与ease不同）
- 0赞 · 3采集
-
- 慕的地8442182 2015-06-27
- -webkit-transition: width 5s ease(缓慢进入缓慢退出) ease-in（缓慢进入） ease-out（缓慢退出） linear（匀速） ease-in-out（缓慢进入缓慢退出与ease不同）
- 0赞 · 0采集
-
- 霜花似雪 2015-06-08
- -webkit-transition: width 5s ease(缓慢进入缓慢退出)/ease-in（缓慢进入）/ease-out（缓慢退出）/liner（匀速）/ease-in-out（缓慢进入缓慢退出与ease不同）
- 0赞 · 2采集
-
- 冷眼罗汉 2015-05-29
- 把代码贴在下面了，但是不出来效果，还是一下子就突然出来了。我把时间加长到500S，还是这样子.
- 0赞 · 0采集
-
- 冷眼罗汉 2015-05-29
- <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>ABC</title> <style type="text/css" media="screen"> #wrapper{ width:1024px; margin:0 auto; } .progress-bar{ height: 40px; width: 40px; background-color: #69c; } .progress-bar:hover{ width:960px; } #bar1{ -webkit-transition: width 500s linear; } #bar2{ -webkit-transtion: width 500s ease; } #bar3{ -webkit-transition: width 500s ease-in; } #bar4{ -webkit-transition: width 500s ease -out; } #bar5{ -webkit-transition: width 500s ease-in-out; } </style> </head>
- 0赞 · 1采集
-
- 冷眼罗汉 2015-05-29
- <body> <div id="wrapper"> <p>linear</p> <div class="progress-bar",id="bar1"> </div> <p>linear</p> <div class="progress-bar",id="bar1"> </div> <p>ease</p> <div class="progress-bar",id="bar2"> </div> <p>ease-in</p> <div class="progress-bar",id="bar3"> </div> <p>ease-out</p> <div class="progress-bar",id="bar4"> </div> <p>ease-in-out</p> <div class="progress-bar",id="bar4"> </div> </div> </body> </html>
- 0赞 · 2采集
-
- 慕先生3587045 2015-04-10
- -webkit-transition: width 5s ease(缓慢进入缓慢退出)/ease-in（缓慢进入）/ease-out（缓慢退出）/liner（匀速）/ease-in-out（缓慢进入缓慢退出与ease不同）
-
截图0赞 · 1采集
-
- cynhard 2015-01-03
- div { -webkit-transition: color 1s ease-in; }
- 0赞 · 0采集
数据加载中...