溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

web前端入門到實(shí)戰(zhàn)：css3動(dòng)畫 Transition

發(fā)布時(shí)間：2020-05-30 18:43:40 來源：網(wǎng)絡(luò) 閱讀：234 作者：前端向南 欄目：web開發(fā)

CSS transitions 提供了一種在更改CSS屬性時(shí)控制動(dòng)畫速度的方法。

其可以讓屬性變化成為一個(gè)持續(xù)一段時(shí)間的過程，而不是立即生效的。比如，將一個(gè)元素的顏色從白色改為黑色，通常這個(gè)改變是立即生效的，使用 CSS transitions 后該元素的顏色將逐漸從白色變?yōu)楹谏?，按照一定的曲線速率變化。這個(gè)過程可以自定義。

CSS transitions 可以決定哪些屬性發(fā)生動(dòng)畫效果 (明確地列出這些屬性)，何時(shí)開始 (設(shè)置 delay），持續(xù)多久 (設(shè)置 duration) 以及如何動(dòng)畫 (定義timing funtion，比如勻速地或先快后慢)。

可動(dòng)畫屬性的列表是：

-moz-outline-radius
-moz-outline-radius-bottomleft
-moz-outline-radius-bottomright
-moz-outline-radius-topleft
-moz-outline-radius-topright
-webkit-text-fill-color
-webkit-text-stroke
-webkit-text-stroke-color
all
backdrop-filter
background
background-color
background-position
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-width
border-color
border-end-end-radius
border-end-start-radius
border-left
border-left-color
border-left-width
border-radius
border-right
border-right-color
border-right-width
border-start-end-radius
border-start-start-radius
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-width
border-width
bottom
box-shadow
caret-color
clip
clip-path
color
column-count
column-gap
column-rule
column-rule-color
column-rule-width
column-width
columns
filter
flex
flex-basis
flex-grow
flex-shrink
font
font-size
font-size-adjust
font-stretch
font-variation-settings
font-weight
gap
grid-column-gap
grid-gap
grid-row-gap
grid-template-columns
grid-template-rows
height
inset
inset-block
inset-block-end
inset-block-start
inset-inline
inset-inline-end
inset-inline-start
left
letter-spacing
line-clamp
line-height
margin
margin-bottom
margin-left
margin-right
margin-top
mask
mask-border
mask-position
mask-size
max-height
max-lines
max-width
min-height
min-width
object-position
offset
offset-anchor
offset-distance
offset-path
offset-position
offset-rotate
opacity
order
outline
outline-color
outline-offset
outline-width
padding
padding-bottom
padding-left
padding-right
padding-top
perspective
perspective-origin
right
rotate
row-gap
scale
scroll-margin
scroll-margin-block
scroll-margin-block-end
scroll-margin-block-start
scroll-margin-bottom
scroll-margin-inline
scroll-margin-inline-end
scroll-margin-inline-start
scroll-margin-left
scroll-margin-right
scroll-margin-top
scroll-padding
scroll-padding-block
scroll-padding-block-end
scroll-padding-block-start
scroll-padding-bottom
scroll-padding-inline
scroll-padding-inline-end
scroll-padding-inline-start
scroll-padding-left
scroll-padding-right
scroll-padding-top
scroll-snap-coordinate
scroll-snap-destination
scrollbar-color
shape-image-threshold
shape-margin
shape-outside
tab-size
text-decoration
text-decoration-color
text-emphasis
text-emphasis-color
text-indent
text-shadow
top
transform
transform-origin
translate
vertical-align
visibility
width
word-spacing
z-index
zoom

例子：

<body>
    <p>盒子的多個(gè)屬性一起動(dòng)畫: width, height, background-color, transform. 將光標(biāo)懸停在盒子上查看動(dòng)畫。</p>
    <div></div>
</body>

.box {
    border-style: solid;
    border-width: 1px;
    display: block;
    width: 100px;  /*初始值*/
    height: 100px;  /*初始值*/
    background-color: #0000FF;  /*初始值*/
    -webkit-transition:width 2s, height 2s, 
        background-color 2s, -webkit-transform 2s;
    transition:width 2s, height 2s, background-color 2s, transform 2s;
}
/*鼠標(biāo)懸浮的時(shí)候觸發(fā)動(dòng)畫樣式*/
.box:hover {
    background-color: #FFCCCC;  /*在2s內(nèi)變成#FFCCCC*/
    width:200px;  /*在2s內(nèi)變成200*/
    height:200px;  /*在2s內(nèi)變成200*/
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);  /*在2s內(nèi)旋轉(zhuǎn)180度*/
}
web前端開發(fā)學(xué)習(xí)Q-q-u-n： ⑦⑧④-⑦⑧③-零①② ，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻

transition沒有無限循環(huán)。

transition是由多個(gè)屬性值組成的簡(jiǎn)寫屬性。依次包括：

transition-property指定哪個(gè)或哪些 CSS 屬性用于過渡。只有指定的屬性才會(huì)在過渡中發(fā)生動(dòng)畫，其它屬性仍如通常那樣瞬間變化。

transition-duration指定過渡的時(shí)長(zhǎng)?？梢灾付ǘ鄠€(gè)時(shí)長(zhǎng)，每個(gè)時(shí)長(zhǎng)會(huì)被應(yīng)用到由transition-property指定的對(duì)應(yīng)屬性上。如果指定的時(shí)長(zhǎng)個(gè)數(shù)小于屬性個(gè)數(shù)，那么時(shí)長(zhǎng)列表會(huì)重復(fù)。如果時(shí)長(zhǎng)列表更長(zhǎng)，那么該列表會(huì)被裁減。

transition-timing-function CSS屬性受到transition的影響，會(huì)產(chǎn)生不斷變化的中間值，而transition-timing-function 屬性用來描述這個(gè)中間值是怎樣計(jì)算的。實(shí)質(zhì)上，通過這個(gè)函數(shù)會(huì)建立一條加速度曲線，因此在整個(gè)transition變化過程中，變化速度可以不斷改變。這條加速度曲線被transition-timing-function所定義，之后作用到每個(gè)CSS屬性的過渡。可以規(guī)定多個(gè)timing function，根據(jù)transition property的列表給每個(gè)CSS屬性應(yīng)用相應(yīng)的timing function。如果timing function的個(gè)數(shù)比transition property中數(shù)量少，缺少的值被設(shè)置為初始值（ease） 。如果timing function比transition property要多，timing function函數(shù)列表會(huì)被截?cái)嘀梁线m的大小。

transition-timing-function的取值：

transition-timing-function: ease
transition-timing-function: ease-in
transition-timing-function: ease-out
transition-timing-function: ease-in-out
transition-timing-function: linear
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1)
transition-timing-function: step-start
transition-timing-function: step-end
transition-timing-function: steps(4, end)
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手