CSS 3 トランジション-transition_html/css_WEB-ITnose

CSS 3 トランジション

========================================== == ===========================================

移行-- -A 要素は、異なる状態間をスムーズに遷移します。transition 属性は、遷移効果を実現するために CSS 3 で使用されます。

transition: 遷移属性実行時間 time 関数遅延時間

time 関数---要素の移動速度を設定します

(1) ベジェ曲線 cubic-bezier(p1( x, y),p2(x,y))

事前定義されたベジェ曲線:

ease(デフォルト)

線形

ease-in

ease-out

ease-in-out

(2) ステップ()

step-start // ステップ数は 1 つです

step-end

=================== == =============================================== == =============================================== == =============================================== == ==============

例 1:

img：hover{    transform: translate(600px);}img{    transition:2s cubic-bezier(0.6,0.1,0.1,0.7);}

例 2:

<style>        div:hover img{            transform:translate(300px);        }        .i01{            transition:2s steps(3,start);        }        .i02{            transition:2s steps(3,end);        }        .i03{            transition:2s linear;        }    </style>

    <div>        <img class="i01 lazy"  src="/static/imghwm/default1.png"  data-src="images/caffe-1.jpg"   alt="" /><br/>        <img class="i02 lazy"  src="/static/imghwm/default1.png"  data-src="images/caffe-2.jpg"   alt="" /><br/>        <img class="i03 lazy"  src="/static/imghwm/default1.png"  data-src="images/caffe-3.jpg"   alt="" />    </div>

============遷移属性 それぞれのステップは別の属性で表すことができます

    transition: all 2s linear 3s;

    transition-property: all;    transition-duration: 2s;    transition-timing-function: linear;    transition-delay: 3s;