css設(shè)置簡(jiǎn)單動(dòng)畫的方法是什么

小編給大家分享一下css設(shè)置簡(jiǎn)單動(dòng)畫的方法是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

首先我們來了解一下css3實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫需要用到的屬性：animation屬性，@keyframes “規(guī)則”。

animation屬性和@keyframes “規(guī)則”是css3新增的屬性，animation屬性可用來給動(dòng)畫設(shè)置許多的CSS樣式，例如color，background-color， height，或width?！就扑]視頻學(xué)習(xí)：css3教程，了解更多css3屬性】

我們先通過@keyframes “規(guī)則”定義，再在animation屬性里調(diào)用，就可以實(shí)現(xiàn)一個(gè)簡(jiǎn)單的動(dòng)畫效果了。

如下所示：實(shí)現(xiàn)背景顏色的不斷切換

.element {
  animation: pulse 5s infinite;
}
@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

運(yùn)行后，背景顏色會(huì)不斷的進(jìn)行變化，在#001F3F顏色值到#FF4136顏色值過渡變化，之間也會(huì)顯示一些過渡的背景色。大家可以自己動(dòng)手試試效果。

每個(gè)@keyframes規(guī)則定義了在動(dòng)畫期間中的特定時(shí)刻應(yīng)該發(fā)生的事情。例如，0％是動(dòng)畫的開頭，100％是結(jié)束。然后可以通過速記animation屬性或其八個(gè)子屬性來控制這些關(guān)鍵幀，以更好地控制應(yīng)如何操縱這些關(guān)鍵幀。

下面我們來看看animation屬性的子屬性有哪些？有什么作用？

1、animation-name：聲明@keyframes要操作的at-rule 的名稱。

2、animation-duration：動(dòng)畫完成一個(gè)循環(huán)所需的時(shí)間長(zhǎng)度。

3、animation-timing-function：建立預(yù)設(shè)的加速度曲線，如ease或linear。

4、animation-delay：正在加載的元素和動(dòng)畫序列的開始之間的時(shí)間。

5、animation-direction：設(shè)置循環(huán)后動(dòng)畫的方向。它的默認(rèn)值在每個(gè)周期重置。

6、animation-iteration-count：動(dòng)畫應(yīng)執(zhí)行的次數(shù)。

7、animation-fill-mode：設(shè)置在動(dòng)畫之前/之后應(yīng)用的值。

例如，我們可以將動(dòng)畫的最后狀態(tài)設(shè)置為保留在屏幕上，也可以將其設(shè)置為在動(dòng)畫開始之前切換回。

8、animation-play-state：暫停/播放動(dòng)畫。

然后可以像這樣使用這些子屬性：

@keyframes stretch {
  /* 在這里聲明動(dòng)畫的動(dòng)作 */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  相同：
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

以下是每個(gè)子屬性可以采用的完整列表：

多個(gè)步驟

如果動(dòng)畫具有相同的起始和結(jié)束屬性，則逗號(hào)分隔內(nèi)部的0％和100％值很有用@keyframes：

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}

多個(gè)動(dòng)畫

我們可以用逗號(hào)分隔值以在選擇器上聲明多個(gè)動(dòng)畫。在下面的例子中，我們想要改變圓圈的顏色，@keyframe同時(shí)也用另一個(gè)方向從一側(cè)到另一側(cè)輕推它。

.element {
  animation: 
    pulse 3s ease infinite alternate, 
    nudge 5s linear infinite alternate;
}

在我們?cè)O(shè)置動(dòng)畫時(shí)，為了讓動(dòng)畫效果更自然，實(shí)現(xiàn)更多效果，可以和css3的其他屬性連用。比如：

1、transform: translate()

2、transform: scale()

3、transform: rotate()

4、opacity

css3動(dòng)畫的兼容性

希望盡可能多地兼容舊版瀏覽器，我們需要使用一些前綴：

.element {
  -webkit-animation: KEYFRAME-NAME 5s infinite;
  -moz-animation:    KEYFRAME-NAME 5s infinite;
  -o-animation:      KEYFRAME-NAME 5s infinite;
  animation:         KEYFRAME-NAME 5s infinite;
}
@-webkit-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

看完了這篇文章，相信你對(duì)css設(shè)置簡(jiǎn)單動(dòng)畫的方法是什么有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！