CSS3 過渡

時間 2019-11-07

標籤 css3 css 過渡欄目 CSS 简体版

原文原文鏈接

概覽

CSS 過渡（ transition ）用來控制 CSS 屬性的變化速率。可讓屬性的變化過程持續一段時間，而不是當即生效。好比，將元素的顏色從白色改成黑色，一般這個改變是當即生效的，使用 transition 後，將按一個曲線速率變化。這個過程能夠自定義。css

CSS3 過渡和 CSS3 動畫具備相似的效果，但相對要簡單很多。html

過渡是做用在某個CSS屬性上，而動畫是做用在某個動畫規則上，這點要注意。web

小試牛刀

仍是先看一個完整的小例子，來體會過渡的魅力吧。segmentfault

<!DOCTYPE html>
<html>
<head>
<style> 
    div {
        width: 100px;
        height: 100px;
        background: blue;
        transition: width 2s;
        -moz-transition: width 2s; /* Firefox */
        -webkit-transition: width 2s; /* Safari and Chrome */
        -o-transition: width 2s; /* Opera */
    }

    div:hover {
        width:300px;
    }
</style>
</head>
<body>

<div></div>

</body>
</html>

要實現過渡，必須規定如下兩點：函數

規定您但願把效果添加到哪一個 CSS 屬性上動畫
規定效果的時長ui

過渡屬性

過渡經過 transition 簡寫屬性或其對應的具體屬性來決定哪些屬性發生動畫效果 (明確地列出這些屬性 transition-property)，什麼時候開始 (設置 transition-delay), 持續多久 (設置 transition-duration) 以及如何動畫 (定義transition-timing-function 函數，好比勻速地或先快後慢)，下面分別介紹之。spa

`transition-property`

transition-property 屬性規定應用過渡效果的 CSS 屬性的名稱。（當指定的 CSS 屬性改變時，過渡效果將開始）。指針

提示：過渡效果一般在用戶將鼠標指針浮動到元素上時發生。code

transition-property: none; /* 沒有過渡效果 */
transition-property: width; /* 寬度變化將得到過渡效果 */
transition-property: all; /* 全部屬性變化將得到過渡效果 */
transition-property: width, height; /* 寬度和高度變化將得到過渡效果 */

`transition-duration`

transition-duration 屬性規定完成過渡效果須要花費的時間（以秒或毫秒計）。

transition-duration: 2s;/* 等價於2000ms */

`transition-timing-function`

transition-timing-function 屬性規定過渡效果的速度曲線。

這部分同 CSS3 動畫中的 animation-timing-function ，很少贅述。

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n, n, n, n);

`transition-delay`

transition-delay 屬性規定過渡效果什麼時候開始（以秒或毫秒計，容許負值）。

transition-delay: 2s;

`transition`

上述具體屬性的簡寫屬性。

transition: property duration timing-function delay;

示例：

div {
    width: 100px;
    transition: width 1s linear 2s;
    /* Firefox */
    -moz-transition:width 1s linear 2s;
    /* Safari and Chrome */
    -webkit-transition:width 1s linear 2s;
    /* Opera */
    -o-transition:width 1s linear 2s;
}
div:hover {
    width: 500px;
}

小結

過渡可讓屬性的變化過程持續一段時間，而不是當即生效，這樣能夠很好的加強用戶體驗。

過渡是用來控制屬性的持續，必須至少具有屬性和 持續時間 兩個條件才能產生效果。

過渡相對於動畫來講較簡單，通常會結合 2D/3D 變換來產生各類動畫效果。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。