总结都浓缩在这个工具里了，想知道工具的地址或想窥探工具诞生的趣事请往下看&。—————————————————————–&&&&&华丽丽的开篇&&&&&—————————————————————-本篇文章来自腾讯内部饭卡充值改版项目的CSS3动画经验总结。虽然你们访问不到我们的饭卡站点，不过可以小窥一下我们的动画示例哟。（请使用chrome、safari或firefox浏览器看效果，）实现上面“嘀卡萌风骚乱舞”的动画，比较麻烦的是，要凭感觉自己算参数写代码，重复试个千百回，才能达到最终满意的效果。比如这个动画：我曾经，这么干过还这么干过step1,&动作1在0%上，动作停留20帧@keyframes&anim-name{&
&&&&0%,&20%{&/*&动作1&*/&}
复制代码step2,&&动作之间过渡5帧，动作1结束帧在20%，20+5=25,&动作2在25%帧，动作停留20帧@keyframes&anim-name{&
&&&&0%,&20%{&/*&动作1&*/&}
&&&&25%,&45%{&/*&动作2&*/&}
复制代码……经过一番计算后@keyframes&anim-name{&
&&&&0%,&20%{&/*&动作1&*/&}
&&&&25%,&45%{&/*&动作2&*/&}
&&&&50%,&70%{&/*&动作3&*/&}
&&&&75%,&95%{&/*&动作4&*/&}
&&&&100%,&120%{&/*&动作5&*/&}
复制代码艾玛，帧数超出100%了&_&重新计算了一番，动作数5，动作过渡帧数5%，动作停留帧数16%@-webkit-keyframes&anim-name{
&&&&0%,&16%{&&/*&动作1&*/&&}
&&&&21%,&37%{&&/*&动作2&*/&&}
&&&&42%,&58%{&&/*&动作3&*/&&}
&&&&63%,&79%{&&/*&动作4&*/&&}
&&&&84%,&100%{&&/*&动作5&*/&&}
复制代码感谢人民感谢党，最后一帧加起来刚好100%刷新页面看效果之后……（动作过渡有点快，动作停留有点长）效果不对，重算!效果不对，重算!……就这样被折腾地体无完肤，深刻感悟我们是用生命在做动画，啊…..多么痛的领悟悟悟~~（有共鸣的，请默默的点个赞，谢谢）所以，我们今天来探讨如何更科学的计算帧数?文章主要研究循环动画，各个动作之间的过渡有规律性。比如嘀卡萌跳舞动画走路动画还有跑步动画（该动画的实现，可&&白树同学的分享）动作过渡有规律性，从代码层面也可理解为各动作之间的过渡帧数是一样的。如上面白树同学实现的跑步动画，各动作之间的过渡帧约14.3帧，代码为@keyframes&anim-name{
&&&&0%&{background-position:&0&0;}
&&&&14.3%&{background-position:&-180px&0;}
&&&&28.6%&{background-position:&-360px&0;}
&&&&42.9%&{background-position:&-540px&0;}
&&&&57.2%&{background-position:&-720px&0;}
&&&&71.5%&{background-position:&-900px&0;}
&&&&85.8%&{background-position:&-1080px&0;}
&&&&100%&{background-position:&0&0;}
复制代码好，下面让我们愉快的进入主题吧循环动画按循环方式可以分为：用CSS代码的方式表示，就是：单向循环：&animation-iteration-count:&&animation-direction:&双向循环：&&animation-iteration-count:&&animation-direction:&先看看做一个动画需要哪些条件总帧数：100&（已知参数）CSS3帧动画的帧数设置是从0%~100%，数值可以带小数位，0%可以用from关键词替代，100%可以用to关键词替代动作数：n&（已知参数）动画中的几个关键动作动作停留帧数：x&（未知参数）在当前动作停留的帧数动作过渡帧数：y&（未知参数）上一个动作过渡到下一个动作需要用的帧数我们用示例来说明它们之间的关系。单向循环动画示例要求：实现一个3个动作的单向循环动画为了方便理解，以线段图示法来展示Step1，满帧100%0%
100%└─────────────────────────────────────────┘Step2，添加动作节点(总节点数&=&动作数)0%
100%过渡y帧
过渡y帧└────────────────────┴────────────────────┘动作1
动作3这个时候，我们很轻易的算出动作2的keyframes帧数是50%实际上，很多时候我们需要让每个动作停顿一会，而不会闪动太快。如“嘀卡萌风骚乱舞”的动画，每个动作都需要定格一会，这个时候我们需要给每个动作分配一些停留帧数。Step3，添加停留帧&(总节点数&=&动作数&*&2)0%
100%停留x帧
停留x帧└───────┴────────┴────────┴───────┴───────┘动作1
动作3这下就复杂了，不过我们仔细分析，会发现它们之间有一定的规律。3x&+&2y&=&100动作个数&=&3&&&&&&&停留帧个数&=&3&&&&&&过渡帧个数&=&2设动作个数为n，则动作个数&=&n&&&&&&&停留帧个数&=&n&&&&&&过渡帧个数&=&n-1然后，我们可以得出一个公式nx&+&(n-1)y&=&100接下来我们可以有规则性的尝试动画参数了，我们尝试让每个动作停留20帧，通过公式求得动作过渡帧数y也等于20，于是得出我们的帧数代码.demo{animation:anim-name&1s&}&&/*&单向循环&*/
@keyframes&anim-name{
&&&&0%,&20%{&&/*&动作1&*/&&}
&&&&40%,&60%{&&/*&动作2&*/&&}
&&&&80%,&100%{&&/*&动作3&*/&&}
复制代码有了公式，我们就不用瞎尝试啦，可以少死点脑细胞了双向循环动画示例要求：实现一个3个动作的双向循环动画复制上面的动画代码，加个&animation-direction:&&属性不就好了？(哦，不对，按照心理学反推论，如果这么简单，作者有必要另起篇幅吗？肯定有阴谋！)不用猜了，我就是有阴谋！继续线段图示，当我们加入&animation-direction:&&属性之后的效果是问题：首尾动作从第二遍播放开始会重复停留时间！这个并不是我们期望看到的效果，不过解决方法也很简单通过线段图分析2x&+&2y&=&100动作个数&=&3&&&&&&&停留帧个数&=&2&&&&&&&&&过渡帧个数&=&2设动作个数为n，则动作个数&=&n&&&&&&&停留帧个数&=&n-1&&&&&过渡帧个数&=&n-1然后，我们可以得出一个公式(n-1)(x+y)&=&100接下来我们还是尝试让每个动作停留20帧，通过公式求得动作过渡帧数y等于30，于是得出我们的帧数代码.demo{animation:anim-name&1s&infinite&}&/*&双向循环&*/
@keyframes&anim-name{
&&&&0%,&10%{&&/*&动作1&*/&&}
&&&&40%,&60%{&&/*&动作2&*/&&}
&&&&90%,&100%{&&/*&动作3&*/&&}
复制代码注意：双向循环动画，首尾动作停留帧要各减一半，示例的首尾动作停留帧为10&(20/2=10)细心的同学会发现，其实这里还有点小瑕疵，那就是问题：第一次播放的第一个动作只停了一半时间！有时我们做动作衔接，一定要所有动作时间都保持一致。解决办法也不是没有，可以给动画加个延迟时间&animation-delay&属性，时长等于动作停留时间的一半，如何计算时长后面会讲到。除了加延时解决这个问题之外，还有一个伪方法，请继续往下看模拟双向循环动画示例要求：实现一个3个动作的双向循环动画模拟双向循环动画就是不使用&animation-direction:&&属性实现双向循环的效果。有点绕，上线段图通过线段图分析4x&+&4y&=&100动作个数&=&5&&&&&&&停留帧个数&=&4&&&&&&&&&过渡帧个数&=&4设动作个数为n，则动作个数&=&n&&&&&&&停留帧个数&=&n-1&&&&&过渡帧个数&=&n-1然后，我们可以得出一个公式(n-1)(x+y)&=&100但动作个数5包含了重复动作，不符合我们的计算习惯，不包含重复动作个数3才符合我们的计算习惯。那么设（不含重复）动作个数为&m（含重复）动作个数为&n，则&n&=&2m-1，将&2m-1&带入上面的公式得出公式(2m-1-1)(x+y)&=&100将m统一换成n表示，再简化公式后得到最终公式(2n-2)(x+y)&=&100接下来我们再次尝试让每个动作停留20帧，通过公式求得动作过渡帧数y等于5，于是得出我们的帧数代码.demo{animation:anim-name&1s&}&/*&模拟双向循环&*/
@-webkit-keyframes&anim-name{
&&&&0%{&&/*&动作1&*/&&}
&&&&20%{&&/*&动作1&*/&&}
&&&&25%{&&/*&动作2&*/&&}
&&&&45%{&&/*&动作2&*/&&}
&&&&50%{&&/*&动作3&*/&&}
&&&&70%{&&/*&动作3&*/&&}
&&&&75%{&&/*&动作2&*/&&}
&&&&95%{&&/*&动作2&*/&&}
&&&&100%{&&/*&动作1&*/&&}
复制代码缩写版代码.demo{animation:anim-name&1s&}&/*&模拟双向循环&*/
@keyframes&anim-name{
&&&&0%,&20%,&100%{&&/*&动作1&*/&&}
&&&&25%,&45%,&75%,&95%{&&/*&动作2&*/&&}
&&&&50%,&70%{&&/*&动作3&*/&&}
复制代码模拟双向循环的方法可以让所有动作的停留时间都保持一致，缺点就是代码比较多，帧数也算得麻烦，不过也不失为一种解决方法。一般情况下，还是建议大家使用双向循环+延迟播放的方案。提到延迟播放，跟时间有关系，这个延迟时长该怎么定？如果以上方案，每个动作我们要固定它的过渡时间，比如动作之间过渡0.4秒，那过渡帧数又该怎么定？接下来我们再挖掘一下，帧数如何跟时间结合。时间模式计算帧数我们在做动画的时候需要设置一个&animation-duration&动画持续时间的属性，知道持续播放时间我们就可以很轻易的计算出播放速度，还记得我们小学学的速度公式吗？设，总帧数为s(100帧)，播放时间为t，播放速度为v，得出公式v&=&s&/&t继续用示例来加深理解。示例要求：实现一个3个动作的单向循环动画，播放时间2秒，每个动作的过渡时间为0.4秒通过播放速度公式，我们可以计算出过渡帧数。播放速度：&&100帧&/&2秒&=&50帧/秒过渡帧数：&&50帧/秒&*&0.4秒&=&20帧得出过渡帧数，接下来套用单向循环动画的帧数公式，计算出停留帧数，参考上面总结的公式&&nx&+&(n-1)y&=&100&&，推导公式得出停留帧数&x&=&(100-(n-1)y)&/&n动作个数(n)：&&3过渡帧数(y)：&20停留帧数：&&(100-(3-1)*20)/3&=&20帧于是得出我们的帧数代码.demo{animation:anim-name&2s&}&&/*&单向循环&*/
@keyframes&anim-name{
&&&&0%,&20%{&&/*&动作1&*/&&}
&&&&40%,&60%{&&/*&动作2&*/&&}
&&&&80%,&100%{&&/*&动作3&*/&&}
复制代码这么多公式，眼都花了更别说记了。别着急，公式是给机器记的，这种破事就交给我们的机器去算。下面是一个简易的CSS3动画帧数计算器，可以帮我们省去一些计算的烦恼。CSS3动画帧数计算器：以白树同学的跑步动画为示例动画是单向循环，有7个关键动作，动作需要使用逐帧过渡效果&animation-timing-function:step-start&实现，所以动作个数需要额外加1，即有8个动作。使用&step-start&后会自动平分动作停留时间，所以keyframes我们就不用加动作停留帧数了。打开工具页面，选择&[单向循环动画]&-&&[不停顿]&-&&[动作个数8]&-&&[生成代码]最后……就没有最后了，欢迎大家一起交流探讨。
微信公众帐号
topthinkone
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
无需注册，直接使用社交账号登录
可使用账号登录页面导航：
→ 正文内容 jQuery Animation
jQuery Animation实现CSS3动画示例介绍
jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态，下面以一个实例为大家详细介绍下具体的实现，感兴趣的朋友可以参考下
jQuery Animation的工作原理是通过将元素的CSS样式从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 "margin:30px"）。字符串值无法创建动画（比如 "background-color:red"）。详细用法请参考方法和官方教程。 像CSS3好多效果因为不是数值的，所以是没有办法直接通过animate()方法实现的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法，这些方法的一个特点就是它们的值是字符和数字混合在一起的。因此我们是不可以直接用animate()方法来动态地修改它们的值来实现动画的效果。 如果我们自己用JavaScript实现CSS3动画，那么我们只能自已通过setInterval()方法来实现，实现起来比较复杂。其实animate()方法就是基于setInterval()方法进行工作的，但是可以用方便的设置动画速度，还可以设置是匀速还是变速。animate()方法的第二种用法有个step参数规定动画的每一步要执行的函数。我们可以用使用一个不影响元素效果显著的CSS值来触发animate()方法，然后在step回调函数中修改我们想要修改的值，这样就可以间接地实现动画了。请看transform例子:
代码如下: &div id="box"&&/div&#box { width:100 height:100 position: top:100 left:100 text-indent: 90 background-color: } $('#box').animate({ textIndent: 0 }, { step: function(now,fx) { $(this).css('-webkit-transform','rotate('+now+'deg)'); }, duration:'slow' },'linear');
这里使用text-indent属性来触发动画，是因为我们这里没有文字，所以使用text-indent而不会影响到元素的样式效果，这里也可以用font-size等。然后使用animate()方法产生的节奏来实现动画。以此类推，我们就可以实现很多效果了。具体例子请参考这里 参考文档 • •
您可能感兴趣的文章:
上一篇：下一篇：
最 近 更 新
热 点 排 行网站介绍本前端开发网站由┢贤┦aΡｐy全权开发，WEB前端开发技术包括html(html5)、css(css3)和javascript(jquery)等,本博客实时关注常见的前端开发问题、最新的前端开发技术和最好的前端开发工具（html手册，html5手册，css手册，css3手册，javascript手册，jquery手册，正则表达式手册，css压缩,javascript压缩，js压缩）,为用户提供各种前端开发资源和经验分享，争取让中国的每个前端都能用最简单的方法,快速地编写出高效、易维护、易扩展的HTML(HTML5),CSS(CSS3),JAVASCRIPT(jQuery)模块化代码! 分类目录css(css3) (37)html(html5) (14)javascript(jQuery) (89)关于 (1)前端移动端 (6)前端综合 (25)生活 (2) 热门文章2014阿里前端线上笔试题 (18,709 次浏览)CSS3盒模型display:box详解 (15,490 次浏览)移动互联网终端的touch事件,touchstart, touchend, touchmove (15,480 次浏览)html5 ajax多图片可预览上传图片 (11,675 次浏览)WEBAPP开发技巧(手机网站开发注意事项) (10,681 次浏览)抽奖转盘的实现 (10,302 次浏览)关于AJAX表单的提交 (9,630 次浏览)webApp 开发技术要点总结(转) (8,423 次浏览)让IE支持CSS3 Media Query实现响应式Web设计 (8,414 次浏览)关于javascript延迟加载图片 (8,198 次浏览)使用Minify来优化网站性能（转） (7,901 次浏览)xdmJS应用之JS图片循环轮播图（图片循环滚动） (7,194 次浏览)动态修改script标签中的src属性存在的问题(转) (6,401 次浏览)垂直居中最简单的办法（纯CSS实现，全兼容） (6,129 次浏览)getElementsByClassName兼容问题 (6,099 次浏览) 随机文章 瀑布流布局 关于javascript冒泡（事件委托） javascript如何获取鼠标选中的文字 javascript中apply和call的用法和区别 FormData对象 css3应用之gradient（渐变） 自适应宽度布局 jquery的click事件多次绑定 getElementsByClassName兼容问题 css3之box-shadow制作多边框 javascript对象object详解 JS滑动展开层 Jquery+SlideDown+在IE7和IE6中的bug 关于jquery的animate的优化 CSS3 Media Queries
近期文章 css实现多行文本溢出显示省略号 关于javascript跨域及JSONP的原理与应用 关于javascript冒泡（事件委托） 前端性能优化最佳实践（转） 浏览器的工作原理：新式网络浏览器幕后揭秘(转) jQuery .attr() .prop() .data()区别及全选等问题 jsDoc使用及配置 Javascript与HTML5的canvas实现图片旋转效果(转) HTML5之画布Canva(转) HTML5本地存储(转) 使用raphael.js绘制中国地图(转) javascript获取textarea中所选文本的开始位置、结束位置和选择的文本 Google html css javascript规范 关于javascript实时显示textarea剩余字符数 w3c标准外的事件 友情链接WEB前端开发刘和虎前端开发啄米鸟的blog以前中的DOM动画都是通过js来实现的，现在css3提供了动画功能，即animation，下面是一个进度条的例子来说明如何使用。
先创建一小段HTML片段。
接下来写CSS
.animation{
/* 定义CSS3动画 */
-webkit-animation-name: animation- /*动画名字，与keyiframes结合使用*/
-webkit-animation-duration: 10s; /*动画持续时间*/
-webkit-animation-timing-function: /*动画播放方式，当前为线性*/
-webkit-animation-iteration-count:/*动画播放次数，当前为无限循环*/
-webkit-animation-delay: 2s;/* 动画延时开始时间 */
-webkit-animation-direction: 'normal'; /* 播放方向 */
/* -webkit-animation-play-state: 'running';
播放状态 */
animation-name: animation-
animation-duration: 10s;
animation-timing-function:
animation-iteration-count:
@-webkit-keyframes animation-name{/* CSS3 帧动画时间轴，兼容webkit私有属性 */
width: 100%;
@keyframes animation-name{/* CSS3 帧动画时间轴 */
width: 100%;
.wp .inner{ /* CSS2 */
display: inline-
height: 20
border-radius: 4
background-color: #5bc0
这样应用了inner和animation class就可以动起来了。
更多关于“”的新闻阅读：爱就是充实了的生命，正如盛满酒的酒杯
Themed By . Powered By
css3 animation循环动画
css3蛮早就关注了，以前还刻苦的坚持的实践了一段时间，对一些常见的属性也比较熟练运用，好久又没去练习了，今天看了下css3 animation，真的挺不错，用它可以来实现循环动画，可以指定多少时间内再执行。
里面就做个简单的说明：
&!DOCTYPE html&
&meta charset=utf-8 /&
&title&JS Bin&/title&
&style type="text/css"&
-moz-animation: revolving 4s 0
-webkit-animation: revolving 4s 0
background:#F70000;
width:100height:100
line-height:100
text-align:
box-shadow:0px 5px 3px -2px rgba(0,0,0,0.6);
@-moz-keyframes revolving{
-moz-transform: perspective(700px) translateX(0px);
-moz-transform: perspective(700px) translateX(150px);
-moz-transform: perspective(700px) translateX(0px);
@-webkit-keyframes revolving{
-webkit-transform: perspective(700px) translateX(0px);
-webkit-transform: perspective(700px) translateX(100px);
-webkit-transform: perspective(700px) translateX(0px);
&div class="item"&
&strong&vison&/strong&