ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3 トランジションプロパティ_html/css_WEB-ITnose
CSS3 トランジションプロパティ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:35:311330ブラウズ
- Transition (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> - 特定のスタイルトランジション、つまり移動するスタイルのみを設定します。 次の例では、幅トランジションを設定します。 (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、つまり、特定の動作を開始するまでの時間を設定します。以下、1秒後に高さが遷移し始めます
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> - 遷移終了時に指定された実行関数をトリガーします
<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 までご連絡ください。