這篇文章主要介紹了CSS動(dòng)畫(huà)技術(shù)中animation怎么用，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

硯山ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書(shū)合作）期待與您的合作！

CSS中的 animation 屬性可以讓很多其它CSS屬性產(chǎn)生動(dòng)畫(huà)效果，比如color, background-color, height， width等。當(dāng)然，你需要為每個(gè)動(dòng)畫(huà)定義@keyframes CSS規(guī)則，animation需要調(diào)用這些@keyframes產(chǎn)生動(dòng)畫(huà)效果，比如：

.element {

animation: pulse 5s infinite;

}

@keyframes pulse {

0% {

background-color: #001F3F;

}

100% {

background-color: #FF4136;

}

}

在每個(gè) @keyframes CSS規(guī)則里面，我們需要定義動(dòng)畫(huà)發(fā)生的階段時(shí)間和變化樣式。例如，0% 表示動(dòng)畫(huà)的開(kāi)始階段，100% 表示動(dòng)畫(huà)的結(jié)束時(shí)刻。animation屬性里引用 keyframes 有一種簡(jiǎn)寫(xiě)方式，展開(kāi)來(lái)一共有8個(gè)子屬性，通過(guò)它們，我們可以控制各種的動(dòng)畫(huà)過(guò)程。

子屬性

animation-name: 指定一個(gè) @keyframes 的名稱(chēng)，動(dòng)畫(huà)將要使用這個(gè)@keyframes定義。

animation-duration: 整個(gè)動(dòng)畫(huà)需要的時(shí)長(zhǎng)。

animation-timing-function: 動(dòng)畫(huà)進(jìn)行中的時(shí)速控制，比如 ease 或 linear.

animation-delay: 動(dòng)畫(huà)延遲時(shí)間。

animation-direction: 動(dòng)畫(huà)重復(fù)執(zhí)行時(shí)運(yùn)動(dòng)的方向。

animation-iteration-count: 動(dòng)畫(huà)循環(huán)執(zhí)行的次數(shù)。

animation-fill-mode: 設(shè)置動(dòng)畫(huà)執(zhí)行完成后/開(kāi)始執(zhí)行前的狀態(tài)，比如，你可以讓動(dòng)畫(huà)執(zhí)行完成后停留在最后一幕，或恢復(fù)到初始狀態(tài)。

animation-play-state: 暫停/啟動(dòng)動(dòng)畫(huà)。

這些屬性可以這樣使用:

@keyframes stretch {

}

.element {

animation-name: stretch;

animation-duration: 1.5s;

animation-timing-function: ease-out;

animation-delay: 0;

animation-direction: alternate;

animation-iteration-count: infinite;

animation-fill-mode: none;

animation-play-state: running;

}

.element {

animation:

stretch

1.5s

ease-out

alternate

infinite

none

running;

}

下面這個(gè)表格展示了每個(gè)子屬性都可以使用哪些值：

animation-timing-function

ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0))

animation-duration

Xs or Xms

animation-delay

Xs or Xms

animation-iteration-count

X

animation-fill-mode

forwards, backwards, both, none

animation-direction

normal, alternate

animation-play-state

paused, running, running

多階段動(dòng)畫(huà)

如果一個(gè)動(dòng)畫(huà)的起始狀態(tài)和終止?fàn)顟B(tài)是一樣的，那么，你可以用逗號(hào)分隔 0% 和 100% 的形式在 @keyframes 里聲明:

@keyframes pulse {

0%, 100% {

background-color: yellow;

}

50% {

background-color: red;

}

}

多樣動(dòng)畫(huà)

我們還可以一次聲明多種動(dòng)畫(huà)效果，用逗號(hào)分隔。在下面的例子中，我們將會(huì)讓圓圈的顏色發(fā)生變化，同時(shí)還會(huì)輕推它，讓它來(lái)回移動(dòng)。

.element {

animation:

pulse 3s ease infinite alternate,

nudge 5s linear infinite alternate;

}

性能

CSS動(dòng)畫(huà)中的很多動(dòng)畫(huà)屬性都需要關(guān)注執(zhí)行性能，在使用一個(gè)動(dòng)畫(huà)前，你需要了解它的運(yùn)行原理。然而，下面這些CSS動(dòng)畫(huà)技術(shù)的組合使用是很安全的，我們可以放心使用：

transform: translate()

transform: scale()

transform: rotate()

opacity

哪些CSS屬性可以運(yùn)用動(dòng)畫(huà)效果？

MDN 上有一個(gè)哪些CSS屬性可以運(yùn)用動(dòng)畫(huà)效果的清單。基本上，能夠運(yùn)用動(dòng)畫(huà)的屬性都是顏色和數(shù)字值，而像 background-image 這樣的屬性就不具備動(dòng)畫(huà)特征。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS動(dòng)畫(huà)技術(shù)中animation怎么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!