CSS3過渡Transition

一、過渡（Transition）

?允許css的屬性值在一定的時間區間內平滑地過渡
（一個元素從一種表現形態到另一種表現形態。用CSS美化，CSS值發生變化。即一個元素，它的屬性從一個值變化到另一個值。）

?CSS效率高，瞬間變化，速度快。在鼠標單擊、獲得焦點、被點擊或對元素任何改變中觸發，并圓滑地以動畫效果改變CSS的屬性值。

【兼容性】
IE10+、FireFox16+、Chrome26+、safari6.1+、Opera12.1+

二、CSS3 transition屬性

1).transition-property屬性

-檢索或設置對象中的參與過渡的屬性。

【語法】

transition-property:none|all|property;

【參數說明】
-none（沒有屬性改變）
-all（所有屬性改變），默認值
-property（元素屬性名）

【例如】
顏色：transition-property:color;
從綠色到紅色

透明度：transition-property:opacity
從0%到100%

transform案例

transform.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style type="text/css">
body { background: #abcdef; }
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;
       -moz-transition: transform;
        -ms-transition: transform;
         -o-transition: transform;
            transition: transform;
}
div:hover { cursor: pointer; transform: rotate(180deg);
    -webkit-transition: transform;
       -moz-transition: transform;
        -ms-transition: transform;
         -o-transition: transform;
            transition: transform;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

【備注】如果不寫transition-property屬性，表示all所有屬性支持過渡。

2).transition-duration屬性

-檢索或設置對象過渡的持續時間

【語法】

transiton-duration:time;

【參數說明】
-規定完成過渡效果需要花費的時間（以秒或毫秒計）
-默認值是0

3).transition-timing-function屬性

-檢索或設置對象中過渡的動畫類型。

【語法】

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out |
step-start | step-end | steps(<integer>[, [ start | end ] ]?) |
cubic-bezier(<number>, <number>, <number>, <number>);

【備注】
一次只能使用一個屬性值

【參數說明】

  • linear:線性過渡。等同于貝塞爾曲線（勻速運動）（0.0,0.0,1.0,1.0）
  • ease：平滑過渡。等同于貝塞爾曲線(0.25,0.1,0.25,1.0)
  • ease-in:由慢到快。等同于貝塞爾曲線(0.42,0,1.0,1.0)
  • ease-out:由快到慢。等同于貝塞爾曲線（0,0,0.58,1.0）
  • ease-in-out:由慢到快再到慢。等同于貝塞爾曲線（0.42,0,0.58,1.0）
  • step-start:等同于 steps(1,start)
  • step-end:等同于steps(1,end)
  • steps(<integer>[,[start|end]]?):接受兩個參數的步進函數
    第一個參數：必須為正整數，指定函數的步數
    第二個參數：取值可是start或end，指定每一步的值發生變化的時間點
    第二個參數：可選，默認值為end

【參數說明】
-cubic-bezier(<number>,<number>,<number>,<number>):
特定的貝塞爾曲線類型，4個數值需在[0,1]區間內

duration、timing-function綜合效果

運動過程持續duration2秒，timing-function-set-in-out效果


transform，duration,timing-ease-in-out.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition-timing-function</title>
<style type="text/css">
body { background: #abcdef; }
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;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
       -moz-transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
         -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
}
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;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
       -moz-transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
         -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

4).transition-delay屬性

-檢索或設置對象延遲過渡的時間

【語法】

transition-delay:time;

【參數說明】
-指定秒或毫秒數之前要等待切換效果開始
-默認值為0

·##transition屬性
-符合屬性，檢索或設置對象變幻時的過渡

【語法】

transition:property duration timing-function delay;

案例：加上delay，延遲一秒后開始

transform四大屬性.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition-delay</title>
<style type="text/css">
body { background: #abcdef; }
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;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
       -moz-transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
         -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
    -webkit-transition-delay: 1s;
       -moz-transition-delay: 1s;
        -ms-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
}
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;
    -webkit-transition-duration: 2s;
       -moz-transition-duration: 2s;
        -ms-transition-duration: 2s;
         -o-transition-duration: 2s;
            transition-duration: 2s;
    -webkit-transition-timing-function: ease-in-out;
       -moz-transition-timing-function: ease-in-out;
        -ms-transition-timing-function: ease-in-out;
         -o-transition-timing-function: ease-in-out;
            transition-timing-function: ease-in-out;
    -webkit-transition-delay: 1s;
       -moz-transition-delay: 1s;
        -ms-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

【備注】區別“duration”與“delay”兩個時間

duration是整個過程所用的時間，
delay是開始之前等待的時候，
雖然delay一般寫在后面，但是執行時先執行。

三、transition簡寫

transition屬性

-復合屬性，檢索或設置對象變換時的過渡

【語法】

transition:property duration timing-function delay;

例如前例的簡寫：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition</title>
<style type="text/css">
body { background: #abcdef; }
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;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • W3C標準中對css3的transition這是樣描述的：“css的transition允許css的屬性值在一定的...
    青春前行閱讀 1,433評論 0贊 5
  • 上一篇介紹了CSS3里transform變形屬性，本篇介紹另一個人氣動畫屬性transition。transiti...
    張歆琳閱讀 25,061評論 1贊 31
  • transition過度 指定進行過度的css屬性 默認值：all none： 不指定過渡的css屬性 all： ...
    angelwgh閱讀 345評論 0贊 0
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,314評論 25贊 708
  • 妳，走后…… 一個人就是一支軍隊 From:啊 Ben 20100725 于隨州二中
    啊Ben閱讀 181評論 0贊 5