css3动画连续播放问题？

问题描述

问 题

比如有3个动画，第一个动画播放10次后执行第二个动画，第二个动画播放5次后执行第三个动画，怎么写？

解决方案

用CSS写的话就是算延时，比如第一段动画你运行10次，每次1秒，那么第二段动画就是delay个10秒以后再执行，同理如果第二段是5次每次0.6秒的话，那么第三段的延时就是第一次的10秒加第二次的3秒，总共delay13秒后执行。

其实一般这种队列动画，超过5个以上我个人都是建议上js的吧，像velocity.js这种框架都会有动画队列的设计，或者上个polyfill用最新的Web Animations API试试；用CSS的话算起来会很烦而且，如果碰到需求变更时量大的话很容易出错，不太划算。

这篇关于css3动画连续播放问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！