CSS3は遷移を高速化し、遅延させる

1. 速度制御機能を使用して、トランジション効果（加速、減速など）の速度曲線を制御します。

速度制御機能を使用すると、トランジション効果の速度カーブを設定できるため、トランジション効果は時間の経過とともに速度が変化します。たとえば、ゆっくり始めてからスピードを上げたり、速く始めてからスピードを落としたりします。

（１）CSS3では以下の速度制御関数を定義している。

linear は、同じ速度で開始および終了する遷移効果を指定します (cubic-bezier(0,0,1,1) に相当)。
easy は、ゆっくり始まり、その後加速し、そしてゆっくり終わる遷移効果を指定します (cubic-bezier(0.25,0.1,0.25,1))。
easy-in は、ゆっくり始まる遷移効果を指定します (cubic-bezier(0.42,0,1,1) に相当)。
easy-out は、ゆっくり終了する遷移効果を指定します (cubic-bezier(0,0,0.58,1) に相当)。
easy-in-out は、ゆっくりと開始および終了する遷移効果を指定します (cubic-bezier(0.42,0,0.58,1) に相当)。
cubic-bezier(n,n,n,n) は、cubic-bezier 関数で独自の値を定義します。可能な値は0から1までの数値です。

（２）速度制御機能の使用：使用する場合、遷移属性の時間パラメータの後に速度制御機能を配置するだけです。記入されていない場合は、デフォルトの速度制御機能（イーズ）が使用されます。

遷移: 不透明度 10 秒、イーズインアウト;

（３）例１：
次の例は、さまざまな速度制御機能の効果の違いを示しています。マウスをボックス内に移動すると、ボックス内のブロックが右に移動し、同時にブロックが回転し、角が丸くなり、背景色とテキスト色も変わります。これらのスタイルの変更にはトランジション効果があり、異なる速度制御機能が使用されるため、トランジションの速度も異なります。

<!doctypehtml>
<html lang="ja">
    <ヘッド>
    <title>hangge.com</title>
    <スタイル>
        .trans_box {
            パディング: 20px;
            
            *ズーム:1;
        }
 
        .trans_list {
            幅: 10%;
            高さ: 64px;
            マージン:10px 0;
            
            色:#fff;
            テキスト配置:中央;
        }
 
        .線形 {
            -webkit-transition: すべて 4 秒線形;
            -moz-transition: すべて 4 秒線形;
            -o-遷移: すべて 4 秒線形。
            遷移: すべて 4 秒線形。
        }
 
        。容易に {
            -webkit-transition: すべて 4s のイージー;
            -moz-transition: すべて 4s のイージー;
            -o-transition: すべて 4 が緩和されます。
            移行: すべて 4 秒で楽になります。
        }
 
        .ease_in {
            -webkit-transition: すべて 4s イーズイン;
            -moz-transition: すべて 4s のイーズイン;
            -o-transition: すべて 4 秒のイーズイン。
            トランジション: すべて 4 秒でイーズイン。
        }
 
        .ease_out {
            -webkit-transition: すべて 4s イーズアウト;
            -moz-transition: すべて 4 秒のイーズアウト;
            -o-transition: すべて 4 でイーズアウトします。
            移行: すべて 4 秒のイーズアウト。
        }
 
        .ease_in_out {
            -webkit-transition: すべて 4s の easy-in-out;
            -moz-transition: すべて 4 秒のイーズインアウト;
            -o-transition: すべて 4 のイーズインアウト;
            トランジション: すべて 4 のイーズイン アウト。
        }
 
        .trans_box:hover .trans_list、.trans_box_hover .trans_list {
            左マージン:89%;
            
            色:#333;
            -webkit-border-radius:25px;
            -moz-border-radius:25px;
            -o-境界線の半径:25px;
            境界線の半径:25px;    
            -webkit-transform: 回転(360度)。
            -moz-transform:回転(360度);
            -o-transform: 回転(360度);
            変換: 回転(360度);             
        }
    </スタイル>
</head>
<div id="transBox" class="trans_box">
    <div class="trans_list easy">イーズ<br>(デフォルト)</div>
    <div class="trans_list easy_in">イーズイン</div>
    <div class="trans_list easy_out">イーズアウト</div>
    <div class="trans_list easy_in_out">イーズインアウト</div>   
    <div class="trans_list linear">リニア</div>
</div>
</html>

（４）例２：

以下は、棒グラフの幅を変更することで、さまざまな速度制御機能の効果の違いを示しています。

<!DOCTYPE html>
<html>
<ヘッド>
<スタイル>
分割
{
マージン:10px 0;
幅:100ピクセル;
高さ:50px;
背景:#2D9900;
色：白;
フォントの太さ:太字;
トランジション:幅 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari と Chrome */
-o-transition:width 2s; /* オペラ */
}
 
#div1 {遷移タイミング関数: linear;}
#div2 {遷移タイミング関数: イージー;}
#div3 {遷移タイミング関数: イーズイン;}
#div4 {遷移タイミング関数: イーズアウト;}
#div5 {遷移タイミング関数: イーズインアウト;}
 
/* Firefox 4: */
#div1 {-moz-transition-timing-function: linear;}
#div2 {-moz-transition-timing-function: イージー;}
#div3 {-moz-transition-timing-function: イーズイン;}
#div4 {-moz-transition-timing-function: イーズアウト;}
#div5 {-moz-transition-timing-function: イーズインアウト;}
 
/* Safari と Chrome: */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: イージー;}
#div3 {-webkit-transition-timing-function: easy-in;}
#div4 {-webkit-transition-timing-function: イーズアウト;}
#div5 {-webkit-transition-timing-function: イーズインアウト;}
 
/* オペラ: */
#div1 {-o-遷移タイミング関数: linear;}
#div2 {-o-transition-timing-function: イージー;}
#div3 {-o-transition-timing-function: easy-in;}
#div4 {-o-transition-timing-function: イーズアウト;}
#div5 {-o-transition-timing-function: easy-in-out;}
 
.trans_box:ホバーdiv
{
幅:500ピクセル;
}
</スタイル>
</head>
<本文>
<div id="transBox" class="trans_box">    
    <div id="div2" style="top:150px">イーズ<br>(デフォルト)</div>
    <div id="div3" style="top:200px">イーズイン</div>
    <div id="div4" style="top:250px">イーズアウト</div>
    <div id="div5" style="top:300px">イーズインアウト</div>
    <div id="div1" style="top:100px">リニア</div>
</div>
</本文>
</html>

2. 遷移に遅延を追加する

遷移プロパティにはオプションの遅延を指定することもできます。これを使用すると、遷移の開始を一定期間遅らせることができます。以下は1秒間待機する例です。
1秒遅延

<!doctypehtml>
<html lang="ja">
    <ヘッド>
    <title>hangge.com</title>
    <スタイル>
        .trans_box3 {
            パディング: 20px;
            
            *ズーム:1;
        }
 
        .trans_box3 div{
            幅:100ピクセル;
            高さ:50px;
            背景:#2D9900;
            色：白;
            フォントの太さ:太字;
 
            -webkit-transition: すべて 2s で 1s を緩和します。
            -moz-transition: すべて 2 秒、1 秒を緩和します。
            -o-transition: すべて 2 で 1 をイーズアウトします。
            遷移: すべて 2 秒、1 秒で終了。
        }
 
        .trans_box3:ホバーdiv
        {
            幅:500ピクセル;
        }
    </スタイル>
</head>
<div class="trans_box3"> 
    <div>1秒遅延</div>
</div>
</html>

CSS3 トランジション速度制御と遅延に関するこの記事はこれで終わりです。CSS3 トランジション速度制御と遅延に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: 画像ボタンをフォームのリセットボタンとして使用する方法

>>: 上下に空白行があるフォームを挿入する解決策