                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /H5+JS+CSS3 實(shí)現(xiàn)圣誕情緣

steps參數(shù)

-webkit-animation-timing-function: steps(3);steps這個函數(shù)中參數(shù)該怎么確定？

陪安東尼度過漫長的歲月

2016-05-25

源自：H5+JS+CSS3 實(shí)現(xiàn)圣誕情緣 3-2

關(guān)注問題我要回答

1410

操作

收起

2 回答

曦呦
2016-06-01

我在網(wǎng)上查到的一個解釋是，step()主要是的css sprite使用的，給出首位的兩個圖的位置，3表示切換的次數(shù)，切換3次 background-position?使其變?yōu)檫B續(xù)的動畫。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

曦呦

首尾兩個圖的background-position。

2016-06-01 回復(fù) 有任何疑惑可以回復(fù)我~

磅礴
2016-05-25

steps()函數(shù)中參數(shù)是根據(jù)自己想要動畫通過幾幀來執(zhí)行確定的，比如在動畫從開始到結(jié)束期間，你想要動畫分3步完成，那參數(shù)就是3，分5步完成，那參數(shù)就是5。（要理解這個：animation-timing-function指定動畫將如何完成一個周期。）

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

陪安東尼度過漫長的歲月提問者

那他與0%，50%，75%，100%有什么關(guān)系，我看了一些資料的解釋是steps這個函數(shù)中的參數(shù)僅僅是指幀與幀切換時有幾個階躍，如果這樣的話那么我把steps這個函數(shù)中的參數(shù)改為1，他應(yīng)該不會影響動畫的整體播放。但結(jié)果是動畫播放不正常

2016-05-26 回復(fù) 有任何疑惑可以回復(fù)我~