使用CSS实现图片帧动画与曲线运动

所有动画的基本原理都是:在短时间内连续依次展示对应的图片,这样在视觉上看起来就是’动’的了。 本文主要来说一说第4点和第5点。 图片帧动画 当我们要实现的动画效果比较复杂,而且开发排期比较紧的情况下,用一张gif动图来实现动画是成本最低,效果也不错的一种方案。比如下面这种动画效果: 可是如果我们想让动效在某个时候暂停,隔一段时间后,再从断点开始继续播放动效,用gif图就实现不了了。 gif图的动效是没有办法暂停的 。这个时候,可以考虑采用图片帧动画。 图片帧动画可以看做是:把gif图的原理在前端用代码实现了一遍。 上面个那个动效,(假设)可以分成100帧,即100张图片,然后用代码控制10