css 3遷移(transition)属性と構文

CSS 3遷移は、要素が一つのスタイルから別のスタイルに徐々に変化する効果である.これを実現するには、効果を追加するCSSプロパティを指定すると、2つの内容を指定する必要があります.効果の持続時間を指定します.

一、遷移属性

ツールバーの
説明
css
transition
1つのアトリビュートに4つのトランジションアトリビュートを設定するための簡略化されたアトリビュート.
3
transition-property
遷移を適用するCSS属性の名前を指定します.
3
transition-duration
トランジション効果にかかる時間を定義します.デフォルトは0です.
3
transition-timing-function
トランジション効果の時間曲線を指定します.デフォルトはeaseです.
3
transition-delay
トランジション効果がいつ開始されるかを指定します.デフォルトは0です.
3

遷移(Transition)

CSSの属性値を一定の時間区間でマウスクリックにスムーズに移行させ、フォーカスを獲得し、クリックされたり要素の任意の変更にトリガーされたりして、スムーズにアニメーション効果でCSSの属性値を変更することができます.

Transition-propertyプロパティ

概念:オブジェクト内の遷移に関与する属性を取得または設定する構文:transition-property:none|all|propertyパラメータ:none(属性変更なし)、all(すべての属性変更、デフォルト値)、property(要素属性名)補足:transition-property属性を書かないと、すべての属性が遷移をサポートすることを示す

//         ，transform      
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); 
    background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
}
//         ，transform      
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition-property: transform;
       -moz-transition-property: transform;
        -ms-transition-property: transform;
         -o-transition-property: transform;
            transition-property: transform;
}

Transition-durationプロパティ

コンセプト:オブジェクト遷移の取得または設定の持続時間構文:transition-duration:time;≪パラメータ｜Parameters｜oraolap≫:トランジションの完了に要する時間(秒またはミリ秒)を指定します.デフォルトは0です.

//        
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); 
    background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    transition-property: transform;
    transition-duration: 2s;  //        ，       2s
}
div:hover { cursor: pointer; transform: rotate(180deg);
    transition-property: transform;
    transition-duration: 2s;  //        ，       2s
}

Transition-timing-functionプロパティ

コンセプト:オブジェクト内の遷移を取得または設定するアニメーションタイプ構文:transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|パラメータ:
linear=>線形遷移、均一運動
ease=>スムーズ遷移、終了比較的硬い
ease-in=>遅いから速い、終わりが硬い
ease-out=>速いから遅い
ease-in-out=>遅いから速いから遅いまで、この効果は人間的です.

//        
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); 
    background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    transition-property: transform;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;  //        ，             
}
div:hover { cursor: pointer; transform: rotate(180deg);
    transition-property: transform;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;  //        ，             
}

Transition-delayプロパティ

コンセプト:オブジェクトの遅延遷移を取得または設定する時間構文:transition-delay:time;パラメータ:遅延時間、デフォルトは0

```css
//        
div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); 
    background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    transition-property: transform;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s;  //        ，  1s       
}
div:hover { cursor: pointer; transform: rotate(180deg);
    transition-property: transform;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s;  //        ，  1s       
}

Transitionプロパティ
コンセプト:複合プロパティ、オブジェクト変換の取得または設定時の遷移構文:transition:property duration timing-function delay;

div { width: 800px; height: 800px; margin: auto; transform: rotate(0deg); 
    background: url(images/imooc.png) no-repeat center center, url(images/circle_outer.png) no-repeat center center;
    -webkit-transition: transform 2s ease-in-out 1s;
       -moz-transition: transform 2s ease-in-out 1s;
        -ms-transition: transform 2s ease-in-out 1s;
         -o-transition: transform 2s ease-in-out 1s;
            transition: transform 2s ease-in-out 1s;
}
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition: transform 2s ease-in-out 1s;
       -moz-transition: transform 2s ease-in-out 1s;
        -ms-transition: transform 2s ease-in-out 1s;
         -o-transition: transform 2s ease-in-out 1s;
            transition: transform 2s ease-in-out 1s;
}