CSS3 トランジションのトランジション遅延プロパティ
構文:
transition-delay ： <time> [, <time>]*
Transition-delay は、アニメーションの実行を開始する時間、つまり、要素の属性値を変更した後にトランジション効果の実行を開始するまでにかかる時間を指定するために使用されます。その値: <。 ;time> は値で、単位は s (秒) または ms (ミリ秒) です。これは、:before および :after 疑似要素を含むすべての要素に適用できます。 デフォルトのサイズは「0」です。これは、変換が遅延なく直ちに実行されることを意味します。
1 つの CSS 効果のプロパティを変更するだけでなく、2 つ以上の CSS プロパティのトランジション効果を変更したい場合もあります。その場合は、複数のトランジション ステートメントを文字列にしてカンマ (「,」) で区切るだけで済みます。それぞれが独自の異なる期間と時間レート変換方法を持つことができます。ただし、注目に値する点は、transition-delay とtransition-duration の値はどちらも時間であるため、シーケンス内のそれらの位置を区別するために、ブラウザーは通常、順序に従って決定します。時間として解析できる最初の値は 2 番目です。遷移期間は遷移遅延です。例:
a { -moz-transition: background 0.5s ease-in,color 0.3s ease-out;
-webkit-transition: background 0.5s ease-in,color 0.3s ease-out;
-o-transition: background 0.5s ease-in,color 0.3s ease-out;
transition: background 0.5s ease-in,color 0.3s ease-out;
}
要素に対してすべてのトランジション効果属性を実行したい場合は、次のように all 属性値を使用して操作することもできます。同じ期間とレートの変換方法を共有します。
a { -moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
以下に示すように、transition に短縮形を与えることができます。
p { -webkit-transition: all .5s ease-in-out 1s;
-o-transition: all .5s ease-in-out 1s;
-moz-transition: all .5s ease-in-out 1s;
transition: all .5s ease-in-out 1s;}
例 1:<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style type="text/css">
#thediv{
width:100px;
height:100px;
background:blue;
transition-property:width,height;
-moz-transition-property:width,height;
-webkit-transition-property:width,height;
-o-transition-property:width,height;
transition-duration:2s;
-moz-transition-duration:2s;
-webkit-transition-duration:2s;
-o-transition-duration:2s;
transition-delay:2s;
-moz-transition-delay:2s;
-webkit-transition-delay:2s;
-o-transition-delay:2s;
}
#thediv:hover{
width:500px;
height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html> 上記のコードでは、マウスが div 上にあるとき、アニメーション効果が実行される前に 2 秒間遅延する必要があります。
例 2:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//m.sbmmt.com/" />
<title>php中文网</title>
<style>
#thediv{
width:100px;
height:100px;
background:blue;
transition-property:width,height;
-moz-transition-property:width,height;
-webkit-transition-property:width,height;
-o-transition-property:width,height;
transition-duration:2s,6s;
-moz-transition-duration:2s,6s;
-webkit-transition-duration:2s,6s;
-o-transition-duration:2s,6s;
transition-delay:2s,6s;
-moz-transition-delay:2s,6s;
-webkit-transition-delay:2s,6s;
-o-transition-delay:2s,6s;
}
#thediv:hover{
width:500px;
height:200px;
}
</style>
</head>
<body>
<div id="thediv"></div>
</body>
</html> 上記のコードでは、マウスが div 上にあると、幅と高さのアニメーション トランジション効果が 2 秒の遅延後に幅と高さのアニメーション トランジションを指し始めます。それぞれ6秒。 - おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜 