第八十二節，CSS3過渡效果

時間 2019-11-12

標籤第八十二 css3 css 過渡效果欄目 CSS 简体版

原文原文鏈接

CSS3過渡效果web

學習要點：
1.過渡簡介
2.transition-property
3.transition-duration
4.transition-timing-function
5.transition-delay
6.簡寫和版本瀏覽器

本章主要探討HTML5中CSS3的過渡效果，經過這個功能能夠不借 JavaScript來實現簡單的用戶交互功能。函數

一．過渡簡介學習

過渡效果通常是經過一些簡單的CSS動做觸發平滑過渡功能，好比：:hover、:focus、:active、:checked等。CSS3提供了transition屬性來實現這個過渡功能，主要屬性以下表：spa

屬性說明code

transition-property 　　　　指定過渡或動態模擬的CSS屬性blog

transition-duration 　　　　指定完成過渡所需的時間ip

transition-timing-function 　　　　指定過渡的函數ci

transition-delay 　　　　　指定過渡開始出現的延遲時間it

transition 　　　　　　簡寫形式，按照上門四個屬性值連寫

咱們先建立一個沒有過渡效果的元素，而後經過:hover來觸發它。在沒有任何過渡效果的觸發，會當即生硬的執行觸發。

/*設置元素樣式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
}
/*鼠標懸停後樣式*/
div:hover{
    background-color: #20ff26;
    border: 5px solid #fff50d;
    margin-left: 100px;
}

<div>
    <p>是一部由北青傳媒股份</p>
</div>

二．transition-property 在元素選擇器上,指定元素僞類選擇器裏要執行過渡的樣式屬性

首先，設置過渡的第一個屬性就是指定過渡的屬性。在元素選擇器上,指定元素僞類選擇器裏要執行過渡的樣式屬性。那麼就使用transition-property屬性，詳細屬性值以下表：

屬性值說明

none 　　　　　　沒有指定任何樣式

all 　　　　默認值，指定元素所支持transition-property屬性的樣式

指定樣式　　　　指定支持transition-property的樣式

從上面的列表中來看，通常來講，none用於自己有過渡樣式從而取消。而all，則是支持全部transition-property樣式，還有一種是指定transition-property中的某些樣式。那麼transition-proerty支持的樣式有哪些？以下表所示：

transition-proerty支持的樣式有

樣式名稱　　　　樣式類型

background-color 　　　　　　 color(顏色)

background-image 　　　　　　 only gradients(漸變)

background-position 　　　　　　 percentage, length(百分比，長度值)

border-bottom-color 　　　　　　 color

border-bottom-width 　　　　　　 length

border-color 　　　　　　　　 color

border-left-color 　　　　　　 color

border-left-width 　　　　　　　 length

border-right-color 　　　　　　　 color

border-right-width 　　　　　　 length

border-spacing 　　　　　　 length

border-top-color 　　　　　　 color

border-top-width 　　　　 length

border-width 　　　　　　 length

bottom 　　　　　　 length, percentage

color 　　　　　　　　 color

crop 　　　　　　　　　 rectangle

font-size 　　　　　　　　 length, percentage

font-weight 　　　　　　 number

grid-* 　　　　　　　　various

height 　　　　　　　 length, percentage

left 　　　　　　　　 length, percentage

letter-spacing 　　　　　　 length

line-height 　　　　　　 number, length, percentage

margin-bottom 　　　　 length

margin-left 　　　　　　 length

margin-right 　　　　　 length

margin-top 　　　　　 length

max-height 　　　　　 length, percentage

max-width 　　　　　 length, percentage

min-height 　　　　　 length, percentage

min-width 　　　　　 length, percentage

opacity 　　　　　　　 number

outline-color 　　　　　　color

outline-offset 　　　　　 integer

outline-width 　　　　　 length

padding-bottom 　　　　 length

padding-left 　　　　　 length

padding-right 　　　　 length

padding-top length

right 　　　　　　　length, percentage

text-indent 　　　　　 length, percentage

text-shadow 　　　　 shadow

top 　　　　　　　length, percentage

vertical-align 　　　　　 keywords, length, percentage

visibility 　　　　　　　visibility

width 　　　　　　 length, percentage

word-spacing 　　　　 length, percentage

z-index 　　　　　　integer

zoom 　　　　　　 number

在元素選擇器上,指定元素僞類選擇器裏要執行過渡的樣式屬性

/*設置元素樣式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*設置背景顏色、邊框、邊距爲過渡效果,若是設置all或者不設置默認支持全部樣式*/
    transition-property: background-color ,border ,margin-left;
}
/*鼠標懸停後樣式*/
div:hover{
    background-color: #20ff26;
    border: 5px solid #fff50d;
    margin-left: 100px;
}

<div>
    <p>是一部由北青傳媒股份</p>
</div>

三．transition-duration 在元素選擇器裏設置過渡時間
若是單純設置過渡的樣式，還不可以馬上實現效果。必須加上過渡所需的時間，由於默認狀況下過渡時間爲0。設置過渡時間爲1秒鐘，若是是半秒鐘能夠設置爲.5s

/*設置元素樣式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*設置背景顏色、邊框、邊距爲過渡效果,若是設置all或者不設置默認支持全部樣式*/
    transition-property: background-color ,border ,margin-left;
    /*設置過渡時間*/
    transition-duration: 1s;
}
/*鼠標懸停後樣式*/
div:hover{
    background-color: #20ff26;
    border: 5px solid #fff50d;
    margin-left: 100px;
}

<div>
    <p>是一部由北青傳媒股份</p>
</div>

四．transition-timing-function產生緩動效果

當過渡效果運行時，好比產生緩動效果。默認狀況下的緩動是：元素樣式從初始狀態過渡到終止狀態時速度由快到慢，逐漸變慢，即ease。也是默認值，其餘幾種緩動方式以下表所示：

屬性值說明

ease 　　　　默認值，元素樣式從初始狀態過渡到終止狀態時速度由

　　　　　　　 快到慢，逐漸變慢。等同於貝塞爾曲線(0.25,0.1,

　　　　　　 0.25, 1.0)

linear 　　元素樣式從初始狀態過渡到終止狀態速度是恆速。等同

　　　　 於貝塞爾曲線(0.0,0.0, 1.0, 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)

cubic-bezier() 貝塞爾曲線，6個值，比較複雜，忽略

steps(1,end) 　　第一個值是一個數值，表示跳躍幾回。第二個值是start或者end，可選值。

表示開始時跳躍，仍是結束時跳躍

設置緩動效果

/*設置元素樣式*/
div{
    width: 200px;
    height: 200px;
    background-color: #ff563a;
    border: 5px solid #1313ff;
    /*設置背景顏色、邊框、邊距爲過渡效果,若是設置all或者不設置默認支持全部樣式*/
    transition-property: background-color ,border ,margin-left;
    /*設置過渡時間*/
    transition-duration: 1s;
    /*置緩動效果 */
    transition-timing-function: ease;

}
/*鼠標懸停後樣式*/
div:hover{
    background-color: #20ff26;
    border: 5px solid #fff50d;
    margin-left: 100px;
}

<div>
    <p>是一部由北青傳媒股份</p>
</div>

五．transition-delay 過渡延遲
這個屬性能夠設置一個過渡延遲效果，就是效果在設置的延遲時間後再執行。使用transition-delay屬性值。若是有多個樣式效果，能夠設置多個延遲時間，以空格隔開。設置延遲效果
如：transition-delay: 0s, 1s, 0s;

六．簡寫和版本

我能夠直接使用transition來簡寫，有兩種形式的簡寫。第一種是，每一個樣式單獨聲明；第二種是不去考慮樣式，即便用all所有聲明。

單獨聲明

說明：transition:過渡樣式過渡時間緩動效果過渡延遲;

transition:background-color 1s ease 0s,color 1s ease 0s,margin-left 1s ease 0s;

若是每一個樣式都是統一的，直接使用all，不去考慮樣式

說明：transition: all(全部樣式) 過渡時間緩動效果過渡延遲;

transition: all 1s ease 0s;

爲了兼容舊版本，須要加上相應的瀏覽器前綴，版本信息以下表：

　　　　Opera 　　　　Firefox 　　　　Chrome 　　Safari 　　　IE

支持需帶前綴 15 ~ 22 　　　　5~ 15 　　　　　4 ~ 25 　　 3.1 ~ 6 無

支持不帶前綴 23+ 　　　　 16+ 　　　　 26+ 　　　 6.1+ 　　　 10.0+

兼容完整版

-webkit-transition:all 1s ease 0s; 
-moz-transition:all 1s ease 0s; 
-o-transition:all 1s ease 0s; 
-ms-transition:all 1s ease 0s; 
transition: all 1s ease 0s;

相關標籤/搜索

每日一句

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