CSS3我在5年之前就有用了，包括公司項(xiàng)目都一直在很前沿的技術(shù)。

最近在寫(xiě)慕課網(wǎng)的七夕主題，用了大量的CSS3動(dòng)畫(huà)，但是真的沉淀下來(lái)仔細(xì)的去深入CSS3動(dòng)畫(huà)的各個(gè)屬性發(fā)現(xiàn)還是很深的，這里就寫(xiě)下關(guān)于幀動(dòng)畫(huà)steps屬性的理解

我們知道CSS3的Animation有八個(gè)屬性

animation-name

animation-duration

animation-delay

animation-iteration-count

animation-direction

animation-play-state

animation-fill-mode

animation-timing-function

其中1-7大多都有介紹，但是animation-timing-function是控制時(shí)間的屬性

在取值中除了常用到的 三次貝塞爾曲線(xiàn) 以外，還有個(gè)讓人比較困惑的?steps() 函數(shù)

animation默認(rèn)以ease方式過(guò)渡，它會(huì)在每個(gè)關(guān)鍵幀之間插入補(bǔ)間動(dòng)畫(huà)，所以動(dòng)畫(huà)效果是連貫性的

除了ease，linear、cubic-bezier之類(lèi)的過(guò)渡函數(shù)都會(huì)為其插入補(bǔ)間。但有些效果不需要補(bǔ)間，只需要關(guān)鍵幀之間的跳躍，這時(shí)應(yīng)該使用steps過(guò)渡方式

?

animation-timing-function 規(guī)定動(dòng)畫(huà)的速度曲線(xiàn)

以上w3school網(wǎng)站上給的使用方法，但是漏掉一個(gè)很重要的?steps

簡(jiǎn)單的來(lái)說(shuō)，我們一直使用animation基本都是實(shí)現(xiàn)線(xiàn)性漸變的動(dòng)畫(huà)

如

• 位置在固定的時(shí)間從起點(diǎn)到終點(diǎn)
• 尺寸在固定的時(shí)間線(xiàn)性變化
• 顏色的線(xiàn)性改變等等

看效果?線(xiàn)性動(dòng)畫(huà)

截取CSS如下

.test1 {width: 90px;height: 60px;-webkit-animation-name: skyset;-webkit-animation-duration: 2000ms;-webkit-animation-iteration-count: infinite; /*無(wú)限循環(huán)*/-webkit-animation-timing-function: linear; } @-webkit-keyframes skyset {0% { background: red;}50%{ background: blue}100% {background: yellow;} }

timing-function:linear 定義的是一個(gè)勻速變化的動(dòng)畫(huà)，就是在2秒內(nèi)，從紅色過(guò)度到藍(lán)色到黃色，是一個(gè)很線(xiàn)性的顏色變化

如果要實(shí)現(xiàn)幀動(dòng)畫(huà)效果而不是線(xiàn)性的變化就需要引入step這個(gè)值了，換句話(huà)就是沒(méi)有過(guò)渡的效果，而是一幀幀的變化

同樣可以看測(cè)試?幀動(dòng)畫(huà)

?

理解steps

steps 函數(shù)指定了一個(gè)階躍函數(shù)

第一個(gè)參數(shù)指定了時(shí)間函數(shù)中的間隔數(shù)量（必須是正整數(shù)）

第二個(gè)參數(shù)可選，接受 start 和 end 兩個(gè)值，指定在每個(gè)間隔的起點(diǎn)或是終點(diǎn)發(fā)生階躍變化，默認(rèn)為 end。

step-start等同于steps(1,start)，動(dòng)畫(huà)分成1步，動(dòng)畫(huà)執(zhí)行時(shí)為開(kāi)始左側(cè)端點(diǎn)的部分為開(kāi)始；

step-end等同于steps(1,end)：動(dòng)畫(huà)分成一步，動(dòng)畫(huà)執(zhí)行時(shí)以結(jié)尾端點(diǎn)為開(kāi)始，默認(rèn)值為end。

看看W3C的規(guī)范?transition-timing-function

?

steps第一個(gè)參數(shù)的錯(cuò)誤的理解：

steps(5，start)

steps() 第一個(gè)參數(shù) number 為指定的間隔數(shù)，即把動(dòng)畫(huà)分為 n 步階段性展示，估計(jì)大多數(shù)人理解就是keyframes寫(xiě)的變化次數(shù)

例如:

@-webkit-keyframes circle {0% {}25%{}50%{}75%{}100%{}}

我之前也一直認(rèn)為steps(5，start）中的5 就是指的keyframes中的0% 25% 50% 75% 100% 分成5個(gè)間隔等分

為什么會(huì)出現(xiàn)這種理解錯(cuò)誤，我們看一個(gè)例子

keyframes的關(guān)鍵幀是只有2個(gè)規(guī)則的時(shí)候，假如我們有一張400px長(zhǎng)度的雪碧圖

@-webkit-keyframes circle {0% {background-position-x: 0;}100%{background-position-x: -400px;}}

此刻設(shè)置steps(5，start）那么會(huì)發(fā)現(xiàn)5張圖會(huì)出現(xiàn)幀動(dòng)畫(huà)的效果，因?yàn)閟teps中的5把 0% – 100%的規(guī)則，內(nèi)部分成5個(gè)等分

實(shí)際內(nèi)部會(huì)執(zhí)行這樣一個(gè)關(guān)鍵幀效果

@-webkit-keyframes circle {0% {background-position-x: 0;}25% {background-position-x: -100px;}50% {background-position-x:-200px;}75%{background-position-x: -300px;}100%{background-position-x: -400px;}}

將這個(gè)規(guī)則稍微修改下，加入一個(gè)50%的狀態(tài)

@-webkit-keyframes circle {0% {background-position-x: 0;}50% {background-position-x: -200px;}100%{background-position-x: -400px;}}

那么同樣用steps(5，start）效果就會(huì)亂套

此刻你會(huì)很迷惑，所以關(guān)鍵要理解第一個(gè)參數(shù)的針對(duì)點(diǎn)，首先引入一個(gè)核心點(diǎn)：

timing-function 作用于每?jī)蓚€(gè)關(guān)鍵幀之間，而不是整個(gè)動(dòng)畫(huà)

那么第一個(gè)參數(shù)很好理解了，steps的設(shè)置都是針對(duì)兩個(gè)關(guān)鍵幀之間的，而非是整個(gè)keyframes，所以第一個(gè)參數(shù)對(duì) - 次數(shù)對(duì)應(yīng)了每次steps的變化

換句話(huà)說(shuō)也是 0-25 之間變化5次，? 25-50之間 變化5次 ，50-75 之間變化5次，以此類(lèi)推

?

第二個(gè)參數(shù)可選，接受 start 和 end 兩個(gè)值，指定在每個(gè)間隔的起點(diǎn)或是終點(diǎn)發(fā)生階躍變化，默認(rèn)為 end

通過(guò)案例看下?step-start，step-end?的區(qū)別

@-webkit-keyframes circle {0% {background: red}50%{background: yellow}100% {background: blue}}

step-start?： 黃色與藍(lán)色相互切換

step-end? ： 紅色與黃色相互切換

2個(gè)參數(shù)都會(huì)選擇性的跳過(guò)前后部分，start跳過(guò)0%，end跳過(guò)100%

step-start在變化過(guò)程中，都是以下一幀的顯示效果來(lái)填充間隔動(dòng)畫(huà)，所以0% 到 50%? 直接就顯示了黃色yellow

step-end與上面相反，都是以上一幀的顯示效果來(lái)填充間隔動(dòng)畫(huà)，所以0% 到 50% 直接就顯示了紅色red

引用w3c的一張step的工作機(jī)制圖

總結(jié)：

steps函數(shù)，它可以傳入兩個(gè)參數(shù)，第一個(gè)是一個(gè)大于0的整數(shù)，他是將間隔動(dòng)畫(huà)等分成指定數(shù)目的小間隔動(dòng)畫(huà)，然后根據(jù)第二個(gè)參數(shù)來(lái)決定顯示效果。

第二個(gè)參數(shù)設(shè)置后其實(shí)和step-start，step-end同義，在分成的小間隔動(dòng)畫(huà)中判斷顯示效果。可以看出：steps(1, start) 等于step-start，steps(1,end)等于step-end

最核心的一點(diǎn)就是：timing-function 作用于每?jī)蓚€(gè)關(guān)鍵幀之間，而不是整個(gè)動(dòng)畫(huà)

總結(jié)

以上是生活随笔為你收集整理的深入理解CSS3 Animation 帧动画的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。