CSS3 transition属性_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:35:311344浏览
- Transition（过渡），设置过渡时间，（transition-duration）
<head> <title>无标题文档</title> <style> .box{width:100px;height:100px;background:red; transition:500ms;} .box:hover{ background:blue;width:200px;height:200px;} </style></head><body> <div class="box"></div></body> - 只设置某一个样式过渡，即要运动的样式，下面的例子设置了width过渡（all | width | height | ... | none):
<head> <title>无标题文档</title> <style> .box{width:100px;height:100px;background:red; transition:500ms width;} .box:hover{ background:blue;width:200px;height:200px;} </style></head><body> <div class="box"></div></body> - 设置运动形式：transition-timing-function (ease[默认值，逐渐变慢], linea[匀速], ease-in[加速], ease-out[减速], ease-in-out[先加速后减速], cubic-besizer[贝塞尔曲线]（http://matthewlein.com/ceaser/）)
<head> <title>无标题文档</title> <style> .box{width:100px;height:100px;background:red; transition:5s width cubic-bezier(0.145,1.295,0.000,1.610);} .box:hover{width:500px;} </style></head><body> <div class="box"></div></body> - 同时设置多个样式的过渡时间，用逗号分隔开，如下
<head> <title>无标题文档</title> <style> .box{width:100px;height:100px;background:red; transition:1s width,2s height,3s background;} .box:hover{width:500px;height:300px;background:blue;} </style></head><body> <div class="box"></div></body> - 设置延迟时间，transition-delay，即多长时间后开始某个运动，下面的例子中在1s之后高度开始过渡
1 <head> 2 <title>无标题文档</title> 3 <style> 4 .box{width:100px;height:100px;background:red; transition:1s width,2s 1s height,3s 3s background;} 5 .box:hover{width:500px;height:300px;background:blue;} 6 </style> 7 </head> 8 <body> 9 <div class="box"></div>10 </body> - 过渡结束时触发指定的执行函数，在过渡结束时，执行alert（“end”）
<head> <title>无标题文档</title> <style> .box{width:100px;height:100px;background:red; transition:1s width;} </style></head><body> <div class="box" id="box"></div> <script> var oBox=document.getElementById("box"); oBox.onclick=function() { this.style.width=this.offsetWidth+100+"px"; }; addEnd(oBox,function(){ alert("end"); }); function addEnd(obj,fn) { obj.addEventListener('WebkitTransitionEnd',fn,false); obj.addEventListener('transitionend',fn,false); } </script></body> - 过渡完成事件
- Webkit内核： obj.addEventListener('webkitTransitionEnd', function(){}, false);
- firefox内核：obj.addEventListener('transitionend', function(){}, false);
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn