css3 实现逐帧动画

实现逐帧动画需要使用到的是Animation动画，该CSS3的Animation有八个属性；分别是如下：

1: animation-name

2: animation-duration

3: animation-delay

4: animation-iteration-count

5: animation-direction

6: animation-play-state

7: animation-fill-mode

8: animation-timing-function

含义分别如下：

animation-name 规定需要绑定到选择器的 keyframe 名称

animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

animation-delay 规定在动画开始之前的延迟。

animation-iteration-count 规定动画应该播放的次数。如果设置 infinite 是动画循环播放。

animation-direction 规定是否应该轮流反向播放动画。

animation-play-state 属性规定动画正在运行还是暂停。属性值有2个；paused(规定动画已暂停。) running(规定动画正在播放。)

animation-fill-mode 规定动画在播放之前或之后，其动画效果是否可见。 有如下四个值：

1: none（不改变默认行为）;

2: forwards (当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。)

3. backwards 在animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。

4. both 向前和向后填充模式都被应用。

其中forwards属性值经常会被使用到；

animation-timing-function 规定动画的速度曲线。

至于动画基本的东西这边不讲解，有空大家可以看看如下这篇文章；

我们先来理解如何做css3的逐帧动画，该动画的过程类似于gif动画；

那么需要先理解使用动画函数的属性 steps；

该属性值如下使用：

animation: redBag-heart1 5s steps(1, end) infinite;

-webkit-animation: redBag-heart1 5s steps(1, end) infinite;

该属性值有2个参数：

第一个参数指定了时间函数中的间隔数量（必须是正整数）。

第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。

step-start 等同于steps(1,start)，动画分成1步，start 第一帧是第一步动画结束

step-end 等同于steps(1,end)：动画分成一步，第一帧是第一步动画开始，默认值为end。

第一个参数是动画分成几步完成，它是指两个关键帧之间的动画，比如如下代码：

@keyframes redBag-heart1 {      0% {        transform: scale(0.08, 0.08);      }      25% {        transform: scale(0.2, 0.2);      }      40% {        transform: scale(0.4, 0.4);      }      60% {        transform: scale(0.6, 0.6);      }      75% {        transform: scale(0.8, 0.8);      }      90% {        transform: scale(1, 1);      }      100% {        transform: scale(3, 3);      }}

它是指如上的 0% 到 25% 两个关键帧分成几步完成，而不是整个keyframes；因此如果我们设置 steps(1,start)的话，说明是两个间隔分成1步完成；

基本的知识点就是如上；现在我们可以来做一个css3的逐帧动画，无非也就是说0% 它是一个什么样子的，20%的时候又是一张背景图，40%又是一张背景图，这样的组成起来的；所以我们平时看到的很多动画，看起来很复杂，其实都是由很多简单的动作组成起来的；

代码如下：

用于检测css动画是否完成的 -- JS代码如下：

var animateContainer = document.querySelector(".redBag-animate");animateContainer.addEventListener("webkitAnimationEnd", function(e) {     $(".redBag-heart").removeClass("hidden");});var animateHeart = document.querySelector(".heart-img");animateHeart.addEventListener("webkitAnimationEnd", function(e) {     $(".redBag-animate").addClass("hidden");});