CSS動畫技術中animation怎么用

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

　　CSS中的 animation 屬性可以讓很多其它CSS屬性產生動畫效果，比如color, background-color, height， width等。當然，你需要為每個動畫定義@keyframes CSS規則，animation需要調用這些@keyframes產生動畫效果，比如：

　　.element {

　　animation: pulse 5s infinite;

　　}

　　@keyframes pulse {

　　0% {

　　background-color: #001F3F;

　　}

　　100% {

　　background-color: #FF4136;

　　}

　　}

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

　　子屬性

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

　　animation-duration: 整個動畫需要的時長。

　　animation-timing-function: 動畫進行中的時速控制，比如 ease 或 linear.

　　animation-delay: 動畫延遲時間。

　　animation-direction: 動畫重復執行時運動的方向。

　　animation-iteration-count: 動畫循環執行的次數。

　　animation-fill-mode: 設置動畫執行完成后/開始執行前的狀態，比如，你可以讓動畫執行完成后停留在最后一幕，或恢復到初始狀態。

　　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;

　　}

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

　　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

　　多階段動畫

　　如果一個動畫的起始狀態和終止狀態是一樣的，那么，你可以用逗號分隔 0% 和 100% 的形式在 @keyframes 里聲明:

　　@keyframes pulse {

　　0%, 100% {

　　background-color: yellow;

　　}

　　50% {

　　background-color: red;

　　}

　　}

　　多樣動畫

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

　　.element {

　　animation:

　　pulse 3s ease infinite alternate,

　　nudge 5s linear infinite alternate;

　　}

　　性能

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

　　transform: translate()

　　transform: scale()

　　transform: rotate()

　　opacity

　　哪些CSS屬性可以運用動畫效果？

　　MDN 上有一個哪些CSS屬性可以運用動畫效果的清單。基本上，能夠運用動畫的屬性都是顏色和數字值，而像 background-image 這樣的屬性就不具備動畫特征。

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