CSS動畫技術(shù)中animation怎么用

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

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

　　.element {

　　animation: pulse 5s infinite;

　　}

　　@keyframes pulse {

　　0% {

　　background-color: #001F3F;

　　}

　　100% {

　　background-color: #FF4136;

　　}

　　}

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

　　子屬性

　　animation-name: 指定一個(gè) @keyframes 的名稱，動畫將要使用這個(gè)@keyframes定義。

　　animation-duration: 整個(gè)動畫需要的時(shí)長。

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

　　animation-delay: 動畫延遲時(shí)間。

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

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

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

　　animation-play-state: 暫停/啟動動畫。

　　這些屬性可以這樣使用:

　　@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

　　多階段動畫

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

　　@keyframes pulse {

　　0%, 100% {

　　background-color: yellow;

　　}

　　50% {

　　background-color: red;

　　}

　　}

　　多樣動畫

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

　　.element {

　　animation:

　　pulse 3s ease infinite alternate,

　　nudge 5s linear infinite alternate;

　　}

　　性能

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

　　transform: translate()

　　transform: scale()

　　transform: rotate()

　　opacity

　　哪些CSS屬性可以運(yùn)用動畫效果？

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

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