css3选用animation的steps特性制做帧动漫

　　昨日十万火急火燎地接到1个每日任务，说是要做1个掷骰子的手机游戏，有关掷骰子期内的过渡动漫，我原本是想用css 3d制做1个立体式的骰子，随后叫UI给6张平面图贴上去。再用translate3d来实际操作。但是UI考虑到得10分周全，立即就给了我1个雪碧图，并告知我在photoshop中能够用帧动漫来播发几张照片，做到相近gif的实际效果，程序流程上完成也大多这般吧。

　　卧槽简直个奇异的UI boy。

　 因而我顺着他的思路，用到了animation在timing-function中的steps特性。

　　先看来看UI给的图吧，是这样的：（注：照片宽度1200px）

　　

　　假如要播发这张照片的话，很显著是分成5个帧，随后界定1个动漫，background-position从（0,0）到（-照片的宽度,0)。最先要搞清楚background-position的标值指的是情况图的左上角端点到器皿左上角端点的x,y间距。x,y正标值越大，情况图越向右下角偏位。

　　因此动漫的编码以下：

　　

　　大家先来播发1下看看实际效果，设定animation:spinning 2s linear infinite,实际效果以下：

　　

　　能够看到是从左到右先后播发：2,3,4,5,6,2,3,4,5,6....。相近跑马灯的实际效果，既然说到这里就顺带提1下alternate,大家都知道infinite linear界定的是0 -> 100 ->0 -> 100 -> 0 -> 100......（自始至终顺向）。而infinite alternate界定的是0 -> 100 -> 100 ->0 -> 0 -> 100......(1下顺向1下反方向)。改动animation:spinning 2s alternate infinite,实际效果以下：

　　

　　可是这都并不是大家必须的实际效果，由于帧动漫的重要在于“瞬变”。在animation的timing-function中，有1个steps(n)特性。表明将动漫分成n帧。例如说，这里大家界定animation:spinning 2s steps(5) infinite。它在这个事例中表明的实际效果以下：

　　

　　在0~400ms时，position：0 0；400ms~800ms,position：⑵40px 0。800ms~1200ms，position:⑷80px 0，以此类推。必须留意的是，例如400ms时position为0 0，在401ms时position就突然变化成⑵40px 0，就是说position是瞬变的。这个部位转变沒有过渡实际效果，这便是steps的特性：阶跃性。

　　此时效性果以下：

　　

　　400ms1帧自然太慢了，大家把時间适度缩小1下。例如总动漫时长为300ms,那便是60ms1帧，分5帧播发完，这样看起来就会顺畅很多。最后实际效果以下：

　

总结

以上所述是网编给大伙儿详细介绍的css3选用animation的steps特性制做帧动漫 ，期待对大伙儿有一定的协助！