多个动画特效怎样设置循环播放？
eqs&&& 12:16:57
1个元素上有3个动画特效，能让3个动画特效全部按顺序循环播放吗？
您好，可以设置“延迟”，来实现动画出现的顺序&
我说的不是动画的顺序，比如有个图动画效果说淡入&闪烁&淡出，这3个动画播完之后我想它按照淡入&闪烁&淡出，这种顺序一直循环下去，这样能不能实现？
您好，抱歉，像您说的这种动画循环，是不支持的&
<font color=#积分
<font color=#金币
<font color=#帖子
公告1234567最新帖子12345678910最新精华12345678910
微信：扫描二维码咨询在线客服
电话：010-
时间：9:00-18:00还在左飞入右飞入？快来学学这十佳H5特效吧！
现在市面上有一大批H5页面模板制作工具，他们方便了很多非专业设计师设计制作H5页面。但是必须吐槽的是，很多模板工具平台上的作品大部分还停留在左飞入右飞出的初级境界，看多了真心有些腻啊！
那H5里有哪些高级动效了？小派几乎仔细体验了国内所有优秀H5页面作品，结合自己的一些理解，整理出下面十大H5页面特效。我们的H5作品如果能用上其中一两个，相信能增色不少！术语也许不够专业，欢迎吐槽！
先说说展示方面的动画特效！
1.粒子特效
百度百科：为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块，原理是将无数的单个粒子组合使其呈现出固定形态，借由控制器，脚本来控制其整体或单个的运动，模拟出现真实的效果。
如上作品，那些粒子流和小火花，就属于粒子特效，很有真实感。
2.SVG路径动画
简而言之，就是让SVG的描边像是有人绘制一样的动画效果。动画轻巧不失真，特别适合那些崇尚简约设计风格的网页。
上作品是派友（Epub360用户）元小望用Epub360设计制作的，大家感受下，是不是很酷！
3.序列帧动画
百度百科：序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。
派友晗萧模仿原版用Epub360制作了“我们之间只有一个字”的优化版，大家看看Epub360序列帧组件性能如何？
4.全线性动画
全线性动画可以理解为动画连续，几乎不间断播放，像视频一样流畅细腻。
这支H5打破了传统幻灯片式的呈现方式，塑造出了一种宽广、素雅、幽静的整体感受，该作品也被很多人推崇为H5里的动画片。
5.Cinemagraphic
什么是Cinemegraphic？如果你不知道，就有点OUT了。顾名思义，Cinema是电影摄影，Graph是图片，Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。
其中Cinemagraphic的应用恰到好处地了诠释了“自然风”的概念，只见画面上，人物的头发和衣角飞舞着，仿佛吹拂着一阵阵自然风，在炎炎夏日，他们依旧感受着清爽，尽情玩耍。作为互动者的人们，当看到画面上被风拂过的Cinemagraphic动态场景，他们也身临其境地感受到自然风所能带来的这种清爽感受。
下面说说和交互相关的动画特效。
虚拟全景美术馆的概念并不新鲜。其鼻祖应该是Google的ArtProject，让你能够在线浏览全世界大多数博物馆和美术馆。杜蕾斯“美术馆”的创新，在于它其实是热门广告形式H5页面的伪装。“我们想要通过多重手段（比如馆内的彩蛋、12点闭馆无法访问等等）来创造一个虚拟的真实空间，而不是传统H5的单线程教育的逻辑。”Socialab杜蕾斯组的负责人说，“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。”
康师傅：2015最飞羊的新春祝愿
祝福灯笼可以360旋转呈现，而且具有夜空繁星中题字灯笼飞来飞去的3D炫目效果，彰显“最飞羊的新春祝愿”。其中意趣和精妙所在，恐非文字所能表述。
8.点击碎屏
“点击屏幕”不新鲜，但是这种屏幕击碎的画面好像也特别讨人喜欢，大概有三轮左右的“击碎”动作，这是整个H5的互动高峰。发现这种“屏幕敲击”的常规动作特别有惯性，点一点就停不下来。是不是抓住了手机族的某些“强迫症”特点。
9.长按逐字
整个H5页面用打字机的形式呈现，随着用户按下按钮，纸片会逐渐显示出韩寒从1999年起，为人熟知或不知的成长轨迹。触发逐字等动效很有真实感。
10.滑动触发
长页H5，滑动触发动效，和呆板的幻灯片式样的H5拉开了距离。Epub360虽然能实现带动效带触发的长页，但是目前暂时还不能实现这种滑动触发动画。
&后参与评论
微信公众号：梅花网给你个方法玩爆H5!!!_H5模板制作_新浪博客
给你个方法玩爆H5!!!
作为一名前端，在拿到设计稿时你有两种选择：
　　1.快速输出静态页面
　　2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来
　　作为一个有志向的前端，当然是选2啦!可是需求时间又很短很短，怎么办呢?
　　这次就来谈谈一些动画设计的小技巧，能在你时间不多又没有动画想法的时候瞬间让页面增色不少。
　　同时也会谈及移动端H5页面的优化细节与关键点，因此本文章将分为动效篇和优化篇。
　　====前方高能====
　　一、CSS3时序错开渐显动画
　　这是一种比较常用的动画，它的优点是节奏感强，做法就是先让每个元素隐藏，然后当页面呈现后每个元素错开时间出现。
　　例子(忽略兼容前缀和无关属性)：
　　效果就是两个元素分别从上面掉下来，这里有个小细节(keyframes)，为了让掉下来的动画生动点，应该是在90%的时候先掉下一点点，然后瞬间在100%时回跳5px。
　　还有个细节，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是渐变动画不能停止在最后一帧。有这样一个解决方案：
　　1.用Modernizr去检测是否支持这个属性，加上识别类.no-animation-fill-
　　2.根据识别类采取以下措施：
　　(1)用js模拟同样效果;
　　(2)用css屏蔽掉动画;
　　(3)或者直接全部都用transition来做(不要keyframes)。
　示例页面如下：
　　二、CSS3细节强调动画
　　一些局部细节如果还是渐现显示，会枯燥没什么感觉，例如标题、按钮等，需要一种强调。
　　分两种情况：
　　1.如果时间允许的话，基本做法是先把一个元素切成不同的块状，例如小人的手脚都切成不同图片，然后让它们重新组合，再通过赋予不同的CSS动画来让它生动起来，这里引用个webank的例子：
　　2.如果时间紧凑，又不像桑尼一样擅长于动画细节，可以使用一些辅助工具：
　　Animate.css，通过直接预览选择想要的动效，然后下载它的CSS把对应的keyframe扒下来就好了(引用整个CSS是资源浪费)。
　　三、SVG动画
　　SVG技术越来越不陌生，使用门槛也渐渐降低，而且SVG动画还可以使用CSS控制。
　　先看个生日页面，是个SVG的蛋糕：
　　可见SVG是很强大的!弥补了CSS3的不足。
　　然而这种动画也是略耗时，但有一种比较常用的，就是线条的描绘动画，CSS3比较难实现，这里可以用SVG，看图：
介绍一个PS插件svgArtisan(目前还未有主页)，这个工具可以直接根据PSD的路径图层生成SVG图形。
　　&&接下来就简单了，将设计稿上的路径图形用插件生成对应的SVG，例如是这样的：&#8203;
　&&　(注意，其中的foreignObject标签内是不支持svg的浏览器会看到一张.m3-svg-nosupport标签下的图片。)
　再使用CSS3的animation控制stroke-dashoffset：
效果不难吧!SVG还有各种用途，例如制作ICONFONT等，可以深入挖掘。
重力陀螺仪
　　想让页面更有层次感，不妨让设计提供一些碎片元素，例如彩花，星星之类，然后把它们单独切出来放画面前景，使用陀螺仪伴随着手机运动碎片也跟着运动，多么好玩!
　　这里提供一个工具可以轻松实现陀螺仪重力效果的：parallax.js
　　用法简单，定义一个parallax-obj的父类，把需要动的元素加上layer的类，然后设置动的范围data-depth：
&五、背景音乐&音效
　　H5页面要炫酷，画面生动还是不够的，一定要配合生动的音乐。因此可以主动跟设计或产品沟通，让他们可以提供音乐资源，分分钟导致UV猛涨有木有!
　　当然，有了音乐，前端也不是直接引用的，还是有点要求：
　　1.音乐不宜过长，30s为佳，而且音乐要加上渐现渐隐效果，方便循环播放;
　　2.音乐体积要小，音质和流量，在手机上还是优先考虑流量吧。
　　一般背景音乐体积可以接受的范围是200K以下，若太大，可以使用格式工厂等软件，降低它的比特率和声道来改变体积。
　　接着，只需要简单引用：
这里有个问题，IOS是不能自动播放音乐的，一定要触发一个用户交互事件，例如点击。
　　但是有一种hack的方法可以让IOS微信侧页面自动播放(SAFARI依旧无效)：
　　通过new一张图片，监听一张图片的onload事件，结束后回调执行音频播放audio.play()即可，原理估计是动了dom结构，相当于执行了一次交互。(有人也用过createEvent模拟，原理也是动了dom。)
　　因此，记得暴露一个音乐关闭/打开的按钮，不然肯定被用户骂死。
　　六、有趣的loading
　　Loading页还是要有的，万一用户网速慢呢?
　　以上做了那么多事，如果没有资源加载都是玩不来的，因此还需要一个loading的支持。一般情况下页面体积大于3m则要加上loading页。
　　然而loading还是可以做得很有趣的，一般的做法是：
　　1.引入品牌，例如APP宣传页;
　　2.引入有趣动画，放一个贱贱的人物跳舞给你看;
　　3.一切从简，用CSS3简单动画。
　　====最后总结====
　　最后，给一个例子结尾吧。
　　这是空间5.0预约页第二版，使用了以上的若干方法论，例如loading动画，CSS3动画，SVG星空连线，首屏星球重力感应，音乐(这里使用开启按钮后播放)等等。这样你的就完美了。
最后向大家推荐一款不错的H5制作工具，能帮你一键生成H5,实现全网营销iebook超级H5：.&
更多H5信息尽在。&#8203;
H5妯℃澘鍒朵綔
博客等级：
博客积分：0
博客访问：50,742
关注人气：0
荣誉徽章：}