css3 实现逐帧动画
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 规定动画的速度曲线。
至于动画基本的东西这边不讲解，有空大家可以看看如下这篇文章；http://www.cnblogs.com/tugenhua0707/p/5385261.html
我们先来理解如何做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%又是一张背景图，这样的组成起来的；所以我们平时看到的很多动画，看起来很复杂，其实都是由很多简单的动作组成起来的；
代码如下：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="author" content="@my_programmer"> <title>webkitAnimationEnd</title> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <script src="./js/zepto.js"></script> <style type="text/css"> body,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,select,textarea,button,th,td,blockquote,address,pre{margin:0;padding:0;} h1,h2,h3,h4,h5,h6,input,textarea,select,button,label{font-size:100%;vertical-align:middle;} ul,dl,ol{list-style:none;} img,fieldset{border:none;} img{display:inline-block;overflow:hidden;vertical-align:top;} em,address{font-style:normal;} sup,sub{vertical-align:baseline;} table{border-collapse:collapse;border-spacing:0;} q:before{content:"";} q:after{content:"";} button{cursor:pointer;} textarea{word-wrap:break-word;resize:none;} .hidden {display:none;} /* 撩红包css3动画 */ .animate-container { width: 150px; height: 168px; position: absolute; top: 0; left: 0; overflow: hidden; } .redBag-animate { width: 150px; height: 168px; background: url("http://images2015.cnblogs.com/blog/561794/201605/561794-20160529001846147-294383374.png") no-repeat center center; animation: redBag-animate1 5s steps(1, end) 1; -webkit-animation: redBag-animate1 5s steps(1, end) 1; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; } .redBag-heart { position: absolute; top: 0; left: 0; z-index: 99; } .redBag-heart img { animation: redBag-heart1 5s steps(1, end) infinite; -webkit-animation: redBag-heart1 5s steps(1, end) infinite; margin-top: 31px; } @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); } } @-webkit-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); } } @-webkit-keyframes redBag-animate1 { 0% { background-position: 0 0; } 14.3% { background-position: 0 -168px; } 28.6% { background-position: 0 -336px; } 42.9% { background-position: 0 -504px; } 57.2% { background-position: 0 -672px; } 71.5% { background-position: 0 -840px; } 100% { background-position: 0 -1008px; } } @keyframes redBag-animate1 { 0% { background-position: 0 0; } 14.3% { background-position: 0 -168px; } 28.6% { background-position: 0 -336px; } 42.9% { background-position: 0 -504px; } 57.2% { background-position: 0 -672px; } 71.5% { background-position: 0 -840px; } 100% { background-position: 0 -1008px; } } </style> </head> <body> <!-- <div class="btn" id="btn">点击动画</div> --> <div class="animate-container"> <div class="redBag-animate"></div> <div class="redBag-heart hidden"> <img src="http://images2015.cnblogs.com/blog/561794/201605/561794-20160529001921991-1838406901.png" width="100%" class="heart-img"/> </div> </div> <script type="text/javascript"> 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"); }); </script> </body> </html>
用于检测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"); });
源码下载