這篇文章給大家分享的是有關(guān)CSS中制作動(dòng)畫的屬性有哪些的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括監(jiān)利網(wǎng)站建設(shè)、監(jiān)利網(wǎng)站制作、監(jiān)利網(wǎng)頁制作以及監(jiān)利網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，監(jiān)利網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到監(jiān)利省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

  基本上我們會(huì)有這樣的一個(gè)簡(jiǎn)單的概念，CSS 的動(dòng)畫效果由瀏覽器控制和渲染，理論上比 JavaScript 的動(dòng)畫效果性能好，但是控制上沒有 JavaScript 那么靈活方便。而css 動(dòng)畫是分成 transform，transition 和 animation 三個(gè)部分，其中 transfrom 主要是控制元素變形，并沒有一個(gè)時(shí)間控制的概念，而 transition 和 animation 才是動(dòng)畫的重點(diǎn)部分，它們可以控制在一個(gè)時(shí)間段里，元素在兩個(gè)或以上的狀態(tài)切換的效果。

一：transition

transition 允許我們?cè)?CSS 屬性變化時(shí)給它添加一個(gè)過度的動(dòng)畫效果。通常情況下，CSS 屬性變化是立即生效的，新的屬性值在超級(jí)短的時(shí)間內(nèi)替換掉舊的屬性值，然后瀏覽器重新繪制樣式內(nèi)容（可能是 reflow 或者 repaint）。大部分情況下會(huì)感覺樣式變化突兀，而 transition 則可以添加順滑的一個(gè)變化效果。例如：

.content {
  background: magenta;
  transition: background 200ms ease-in 50ms;
}
.content:hover {
  background: yellow;
  transition: background 200ms ease-out 50ms;
}

transition 的兼容性，不算差，基本上移動(dòng)設(shè)備都可以使用了，并且能做到漸進(jìn)增強(qiáng)，支持的便有過渡效果，不支持的便是直接切換，所以可以放心使用。

transition 屬性

CSS 的 transition 有四個(gè)屬性：

transition-delay 延遲多久后開始動(dòng)畫
transition-duration 過渡動(dòng)畫的一個(gè)持續(xù)時(shí)間
transition-property 執(zhí)行動(dòng)畫對(duì)應(yīng)的屬性，例如 color，background 等，可以使用 all來指定所有的屬性
transition-timing-function 隨著時(shí)間推進(jìn)，動(dòng)畫變化軌跡的計(jì)算方式，常見的有：linear，ease，ease-in，ease-out，cubic-bezier(...) 等。

這四個(gè)屬性可以簡(jiǎn)寫成為：

.class {
  transition:}

例如前邊的那個(gè)例子，當(dāng) .content 元素 hover 時(shí)，50 毫秒后背景顏色從 magenta 漸變到 yellow，持續(xù)時(shí)間 200 毫秒，使用的是 ease-out 的算法。留意下：transition 生效的是對(duì)應(yīng)的選擇器的屬性，例如 .content:hover 中的 transition 便是從 .content 的 magenta 到 yellow 過渡效果的控制，而 .content 中的 transition 則是控制不 hover 時(shí)，背景顏色從 yellow 到 magenta 的變化過程。

all 這個(gè)屬性值是這樣的，它對(duì)應(yīng)選擇器下的元素的所有 CSS 屬性生效，無論在哪里聲明的 CSS 規(guī)則，并不局限于在同個(gè)代碼塊下。

如果需要不同屬性對(duì)應(yīng)不同的效果，可以這么來寫：

.demo {
  transition-property: all, border-radius, opacity;
  transition-duration: 1s, 2s, 3s;
  /* 當(dāng)這樣使用時(shí)，確保 all 在第一個(gè)，因?yàn)槿绻?nbsp;all 在后邊的話，它的規(guī)則會(huì)覆蓋掉前邊的屬性 */
}

transition 的 none 屬性較少用到，一般用于移除原本有的動(dòng)畫效果。none 沒法和逗號(hào)一起使用來移除特定屬性的動(dòng)畫效果，只能直接干掉 transition，如果要移除特定的屬性效果，可以重寫 transition 而不把要移除的屬性寫進(jìn)去，或者比較 trick 的做法是設(shè)置 duration 為 0。

并不是所有的 CSS 屬性都是可以添加 transition 效果的。詳細(xì)可以參考文檔：animatable properties。可能經(jīng)常遇到的就是 display 這個(gè)屬性并不能添加 transition 效果，你可以考慮使用 visibility 或者后邊會(huì)提及的 animation。

關(guān)于 transition-timing-function 的各個(gè)算法的一個(gè)變化曲線是怎么樣的，我們可以使用 chrome 的開發(fā)者工具來看一下，CSS 中你編寫了對(duì)應(yīng)的 transition 后，把鼠標(biāo)移到 transition-timing-function 的那個(gè)值前邊，如下圖：

這樣你便可以很清晰地看到這個(gè)算法的一個(gè)變化軌跡是怎么用的，然后選擇符合自己需要的一個(gè)算法。

transition 相關(guān)的事件

transitionend 事件會(huì)在 transition 動(dòng)畫結(jié)束的時(shí)候觸發(fā)。通常我們會(huì)在動(dòng)畫結(jié)束后執(zhí)行一些方法，例如繼續(xù)下一個(gè)動(dòng)畫效果或者其他。Zepto.js 中的動(dòng)畫方法都是使用 CSS 動(dòng)畫屬性來處理，而其中動(dòng)畫運(yùn)行后的回調(diào)便應(yīng)該是使用這個(gè)事件來處理。

transitionend 事件觸發(fā)時(shí)會(huì)傳入一些動(dòng)畫相關(guān)的參數(shù)，例如：propertyName，elapsedTime，詳細(xì)內(nèi)容可以參考：transitionend。

transition 應(yīng)用

transition 在很多 UI 框架中是很常見的屬性，當(dāng)我們開發(fā)一個(gè)交互效果的時(shí)候，從某個(gè)狀態(tài)到達(dá)另外一個(gè)狀態(tài)時(shí)，transition 可以使得這個(gè)過程變得更加舒適和順滑。例如上邊的 hover 時(shí)的背景顏色的切換，控制元素的顯示和隱藏時(shí)使用 opacity 來實(shí)現(xiàn)漸隱漸現(xiàn)。

當(dāng) transition 配合上 transform 提供的多樣化的元素變化能力后，便可以繪制出很多有趣的交互漸變效果了。最近使用過程中做的一個(gè)簡(jiǎn)單效果的例子，點(diǎn)擊查看。

很常見還有表單 input 報(bào)錯(cuò)時(shí)邊框變紅，按鈕 hover 時(shí)背景漸變等，很多的 CSS 交互效果會(huì)因?yàn)?transition 變得更加自然。

二：animation

雖然 transition 已經(jīng)提供了很棒的動(dòng)畫效果了，但是我們只能夠控制從一個(gè)狀態(tài)到達(dá)另外一個(gè)狀態(tài)，沒法來控制多個(gè)狀態(tài)的不斷變化，而 animation 而幫助我們實(shí)現(xiàn)了這一點(diǎn)。使用 animation的前提是我們需要先使用 @keyframes 來定義一個(gè)動(dòng)畫效果，@keyframes 定義的規(guī)則可以用來控制動(dòng)畫過程中的各個(gè)狀態(tài)的情況，語法大抵是這個(gè)樣子：

@keyframes W {
  from { left: 0; top: 0; }
  to { left: 100%; top: 100%; }
}

@keyframes 關(guān)鍵詞后跟動(dòng)畫的名字，然后是一個(gè)塊，塊中有動(dòng)畫進(jìn)度的各個(gè)選擇器，選擇器后的塊則依舊是我們常見的各個(gè) CSS 樣式屬性。

在這里，控制動(dòng)畫的整個(gè)過程的選擇器很重要，語法相對(duì)簡(jiǎn)單，你可以使用 from 或者 0% 來表示起始狀態(tài)，而 to 或 100% 來表示結(jié)束狀態(tài)。中間的部分你都可以使用百分比來進(jìn)行表示。選擇器后的塊則是在到達(dá)這個(gè)進(jìn)度狀態(tài)時(shí)元素的樣式應(yīng)該是怎么樣的，整個(gè)的過渡動(dòng)畫在這個(gè)的控制基礎(chǔ)上由瀏覽器去繪制。

同樣地，不是所有的屬性都可以有動(dòng)畫效果，MDN 維護(hù)了一份 CSS 動(dòng)畫的屬性列表 可供參考。

通常來說，多個(gè)狀態(tài)下的相同屬性的值應(yīng)該是可以取到它們的中間值的，例如 left 從 0% 到 100%，如果沒法取到中間值，如 height 從 auto 到 100px，有可能出現(xiàn)奇怪的一些狀況，并且不同瀏覽器對(duì)此的處理也不盡相同，所以請(qǐng)盡量避免這種情況。

animation 屬性

animation 的屬性比 transition 多，如下：

animation-name 你需要的動(dòng)畫效果的 @keyframes 的名字。
animation-delay 和 transition-delay 一樣，動(dòng)畫延遲的時(shí)間。
animtaion-duration 和 transition-duration 一樣，動(dòng)畫持續(xù)的時(shí)間。
animation-direction 動(dòng)畫的一個(gè)方向控制。

默認(rèn)是 normal，如果是上述的 left 從 0% 到 100%，那么默認(rèn)是從左到右。如果這個(gè)值是 reverse，那么便是從右到左。

由于 animation 提供了循環(huán)的控制，所以還有兩個(gè)值是 alternate 和 alternate-reverse，這兩個(gè)值會(huì)在每次循環(huán)開始的時(shí)候調(diào)轉(zhuǎn)動(dòng)畫方向，只不過是起始的方向不同。

例如還是 left 的例子，假設(shè)設(shè)置了 animation-direction: alternate; animation-iteration-count: infinite;，那么這個(gè)元素從左到右移動(dòng)后，便調(diào)轉(zhuǎn)方向，從右到左，如此循環(huán)。

animation-fill-mode 這個(gè)屬性用來控制動(dòng)畫前后，@keyframes 中提供的 CSS 屬性如何應(yīng)用到元素上。
默認(rèn)值是 none，還有其他三個(gè)選擇：forwards，backwards，both。

假設(shè)是 none，那么動(dòng)畫前后，動(dòng)畫中聲明的 CSS 屬性都不會(huì)應(yīng)用到元素上。即動(dòng)畫效果執(zhí)行后，元素便恢復(fù)正常狀態(tài)。

如果是 forwards，那么動(dòng)畫結(jié)束后，會(huì)把最后狀態(tài)的 CSS 屬性應(yīng)用到元素上，即保持動(dòng)畫最后的樣子。而 backwards 則相反，both 則都會(huì)，計(jì)算得出最后的一個(gè)結(jié)果。

animation-timing-function 和 transition-timing-function 一樣，動(dòng)畫變化軌跡的算法。

animation-iteration-count 動(dòng)畫循環(huán)次數(shù)，如果是 infinite 則無限次。有趣的是，支持小數(shù)，即 0.5 表示動(dòng)畫執(zhí)行到一半。

animation-play-state 動(dòng)畫執(zhí)行的狀態(tài)，兩個(gè)值 running 或者 paused，可以用來控制動(dòng)畫是否執(zhí)行。

上述這些屬性可以簡(jiǎn)寫為：

.class {
  animation:}

略長，當(dāng)然，平時(shí)使用中可能是省略部分參數(shù)的。

animation 需要留意的東西

1.優(yōu)先級(jí)

記得 CSS 中的層疊概念么，優(yōu)先級(jí)高的屬性會(huì)覆蓋優(yōu)先級(jí)低的屬性，當(dāng) animation 應(yīng)用到元素中時(shí)，動(dòng)畫運(yùn)行過程中，@keyframes 聲明的 CSS 屬性優(yōu)先級(jí)最高，比行內(nèi)聲明 !important 的樣式還要高。現(xiàn)在瀏覽器的實(shí)現(xiàn)是這樣子的，但是標(biāo)準(zhǔn)文檔中的說法應(yīng)該是可以被 !important 聲明的屬性所覆蓋。

多個(gè)動(dòng)畫的順序

由于 animation-name 是可以指定多個(gè)動(dòng)畫效果的，所以這里便會(huì)出現(xiàn)動(dòng)畫的一個(gè)順序問題。后指定的動(dòng)畫會(huì)覆蓋掉前邊的，例如：

#colors {
  animation-name: red, green, blue; /* 假設(shè)這些 keyframe 都是修改 color 這個(gè)屬性 */
  animation-duration: 5s, 4s, 3s;
}

上述代碼的動(dòng)畫效果會(huì)是這樣：前 3 秒是 blue，然后接著 1 秒是 green，最后 1 秒是 red。整個(gè)覆蓋的規(guī)則是比較簡(jiǎn)單的。

display 的影響

如果一個(gè)元素的 display 設(shè)置為 none，那么在它或者它的子元素上的動(dòng)畫效果便會(huì)停止，而重新設(shè)置 display 為可見后，動(dòng)畫效果會(huì)重新重頭開始執(zhí)行。

animation 相關(guān)事件

我們可以通過綁定事件來監(jiān)聽 animation 的幾個(gè)狀態(tài)，這些事件分別是：

animationstart 動(dòng)畫開始事件，如果有 delay 屬性的話，那么等到動(dòng)畫真正開始再觸發(fā)，如果是沒有 delay，那么當(dāng)動(dòng)畫效果應(yīng)用到元素時(shí)，這個(gè)事件會(huì)被觸發(fā)。

animationend 動(dòng)畫結(jié)束的事件，和 transitionend 類似。如果有多個(gè)動(dòng)畫，那么這個(gè)事件會(huì)觸發(fā)多次，像上邊的例子，這個(gè)事件會(huì)觸發(fā)三次。如果 animation-iteration-count 設(shè)置為 infinite，那么這個(gè)事件則不會(huì)被觸發(fā)。

animationiteration 動(dòng)畫循環(huán)一個(gè)生命周期結(jié)束的事件，和上一個(gè)事件不一樣的是，這個(gè)在每次循環(huán)結(jié)束一段動(dòng)畫時(shí)會(huì)觸發(fā)，而不是整個(gè)動(dòng)畫結(jié)束時(shí)觸發(fā)。無限循環(huán)時(shí)，除非 duration 為 0，否則這個(gè)事件會(huì)無限觸發(fā)。

animation 應(yīng)用

animation 可以實(shí)現(xiàn)控制在多個(gè)狀態(tài)下進(jìn)行動(dòng)畫切換，所以應(yīng)用的場(chǎng)景比 transition 要廣泛得多，可以使用 animation 實(shí)現(xiàn)大量的動(dòng)效.

感謝各位的閱讀！關(guān)于“CSS中制作動(dòng)畫的屬性有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

分享題目：CSS中制作動(dòng)畫的屬性有哪些
轉(zhuǎn)載注明：http://www.chinadenli.net/article34/ieogpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、小程序開發(fā)、企業(yè)網(wǎng)站制作、動(dòng)態(tài)網(wǎng)站、品牌網(wǎng)站制作、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)