!DOCT YPE html>
在学习 CSS 时我们知道，通过 CSS 可以实现简单的动画效果，但对于比较复杂的动画，使用 CSS 实现起来就会比较麻烦。除了可以使用 CSS 来实现外，也可以使用 JavaScript 来实现。JavaScript 动画主要是通过修改元素样式来实现的，能够实现许多 CSS 动画所不能实现的效果，例如暂停、回放等。
与 CSS 动画相比，JavaScript 动画具有以下特点：
- JavaScript 动画控制能力更强，可以在动画播放过程中对动画进行控制，例如开始、暂停、回放、终止、取消等；
- JavaScript 动画的效果比 CSS 动画更丰富，比如曲线运动，冲击闪烁，视差滚动等效果，只有 JavaScript 动画才能完成；
- CSS 动画有兼容性问题，而 JavaScript 大多时候没有兼容性问题。
JavaScript 主要通过代码修改 DOM 元素来实现动画的，并且可以配合定时器来实现循环播放，示例代码如下：
JavaScript
运行结果如下：
图1：JavaScript 动画效果
提示：如今，大多数显示器的刷新率为 60HZ，为了实现更加平滑的动画效果，使用定时器的最佳循环间隔约为 17ms。
下面再通过一个示例来演示如何创建 JavaScript 动画，示例代码如下：
JavaScript
-
-
-
运行结果如下：
图2：JavaScript动画效果