CSS3 トランジションプロパティ_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS3 トランジションプロパティ_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:35:31

オリジナル

1334 人が閲覧しました

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>

ログイン後にコピー