CSS3トランジションの新機能

CSS3の遷移

• 新しい遷移プロパティがCSS3に追加されました。これにより、要素がフラッシュアニメーションやJavascriptを使用せずに、あるスタイルから別のスタイルに変更されたときに、要素に遷移効果を追加できます。この移行は、ある状態から別の状態への段階的な移行です。

• トランジションを使用する最も簡単な方法は、ホバーで使用することです。

• その構文は次のとおりです。

    transition: 要过渡的属性 花费的时间 运动曲线 开始时间;
  

• パラメータの説明：

パラメータ	説明
移行する属性（書き込む必要があります）	幅、高さ、色、内側と外側の余白など、変更する属性はすべて問題ありません。すべての属性を変更する場合は、代わりにすべてを使用できます。
費やした時間（書く必要があります）	この移行変更の効果を完了するのにどのくらい時間がかかりますか。単位は2番目です。注：必ず0.5sや.5sなどの単位を記述してください。
モーションカーブ（省略可能）	デフォルト値はease（変更の速度が徐々に遅くなります）です。複数の値については、次の表を参照してください。
開始時間（省略可能）	デフォルトは0（単位を書き込む必要があります）であり、遅延トリガー時間を設定できます

• モーションカーブ値表

モーションカーブの可能な値	意味
線形	均一な速度
簡易	徐々に減速する
イーズイン	加速する
イーズアウト	速度を落とす
イーズインアウト	最初に加速してから減速します

• 例えば：

    /* CSS */
    .a {
        width: 150px;
        height: 10px;
        border: 1px solid red;
        border-radius: 5px;
    }
  
    .b {
        width: 50%;
        height: 100%;
        border-radius: 5px;
        background-color: red;
        transition: width .5s;
    }
  
    .a:hover .b {
        width: 100%;
    }
  
    <!-- HTML -->
    <div class="a">
    	<div class="b"></div>
    </div>
  

• 上記のコードの効果は次のとおりです。マウスがボックスaに移動すると、プログレスバーは0.5秒で100％に徐々に移行します。