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");
});
css3 实现逐帧动画的更多相关文章
- css3 animation实现逐帧动画
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
- css3逐帧动画
写css3动画的时候,我们经常用到animation来实现,默认情况下,animation是属于连贯性的ease动画.我们熟悉的animation动画有ease.ease-in.ease-out.li ...
- CSS3 animation属性中的steps实现GIF动图(逐帧动画)
相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...
- animation中的steps()逐帧动画
在我们平时做宽高确定,需要背景图片切换的效果时,我如果用的是一张大的png图片.而且恰好是所有小图都是从左向右排列的,那么 我们只需测量出某一个小图距左侧有多少像素(x),然后我们banckgroun ...
- 利用css3-animation来制作逐帧动画
前言 趁着还没有元旦之前先码一篇文章,不然到时候估计又被各种虐了,所以趁现在还有力气先来一篇.今天来聊聊css3中的动画属性animation,对这个属性懵懂是在很早的时候有前辈用这个 animati ...
- 使用node.js开发一个生成逐帧动画小工具
在实际工作中我们已经下下来不下于一万个npm包了,像我们熟悉的 vue-cli,react-native-cli 等,只需要输入简单的命令 vue init webpack project,即可快速帮 ...
- Android动画效果之Frame Animation（逐帧动画）
前言: 上一篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画),今天来总结下Android的另外一种动画Frame ...
- Android 逐帧动画
原理: 逐帧动画是最简单的一种动画.原理就是把几张图片连续显示出来,以达到动画的效果.就相当于下面这种手绘翻页动画啦~ 实现: 1.需要建立一个animation-list来设置静态图片资源.持续时间 ...
- 逐帧动画(Frame-by-frame Animations)
1.这一类动画可以创建一个Drawable序列,这些Drawable可以按照指定的时间间歇一个一个的显示. xml定义方法 <animation-list xmlns:android=" ...
随机推荐
- Access restriction: The type 'BASE64Encoder' is not API
问题的原因好像是这个方法不是安全的,所以不推荐使用,我是在做毕设时要用到的所以就直接用了(毕设要求没有那么严格的要求)
- IIS提示“异常详细信息: System.Runtime.InteropServices.ExternalException: 无法执行程序”
先来看错误提示: 无法执行程序.所执行的命令为 "C:/Windows/Microsoft.NET/Framework/v3.5/csc.exe" /noconfig /fullp ...
- GPU keylogger && GPU Based rootkit(Jellyfish rootkit)
catalog . OpenCL . Linux DMA(Direct Memory Access) . GPU rootkit PoC by Team Jellyfish . GPU keylogg ...
- JavaScript碰到的几个方法
=>isNaN() 函数用于检查其参数|是否|是|非数字值. 绕吧,我给它断个句,别一不小心看叉了 百度百科告诉我们,NaN,是Not a Number的缩写 所以, alert(isNaN(1 ...
- 爬虫例子及知识点（scrapy知识点）
新知识: 新建一个scrapy项目:scrapy startproject xxx(项目名称) 运行一个scrapy项目:scrapy crawl xxx(项目名称) 项目文件说明: 文件说明: • ...
- centos6.5下安装mysql
http://www.centoscn.com/mysql/2014/0812/3481.html 1.使用yum命令安装mysql [root@bogon ~]# yum -y install m ...
- Mysql学习笔记（四）聊聊数据库索引
小心情(可直接跳到分割线后) 今天心情好些了.一些浓的化不开的坏情绪,也渐渐的在晚上解决掉一个复杂的逻辑问题后,渐渐消散了. 今天中午去吃饭的时候,坤哥漫不经心的说:'我这么多年终于悟出了一个道理,人 ...
- java的对象的总结：(PO,VO,DAO,BO,POJO)
一.PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数 ...
- 《Java疯狂讲义》（第3版）学习笔记 1 - 如何学习Java
1.Java是一种面向对象语言,不要简单当做脚本使用.从基础学起,不要从Spring.J2EE.Hibernate和EJB开始学. 2.不要浮躁,应该扎扎实实先学好Java语言,然后按Java本身的学 ...
- for 循环的关键字 break和continue
for(int i=0;i<100;i++){ if(i==50){ continue:// 跳出当前循环,执行下面的循环,就是说,当i=50的时候,跳出循环,从i=51开始继续循环 //业务逻 ...