基于CSS3 技术的动画案例浅析

徐晓

（无锡机电高等职业技术学校，无锡214028）

0 引言

Flash 曾经是用户欣赏视频短片、玩在线游戏时经常使用的播放技术之一，也是复杂动画效果的领导者。但是在可靠性、安全性、性能方面存在问题而饱受质疑。随着时代的发展，JavaScript 等工具将替代Flash，成为了制作动画的另一个制作工具。螳螂捕蝉黄雀在后，进入移动互联网时代之后，HTML5+CSS3 替代JavaScript 作为主要制作工具来实现常见的动画效果。它是可以真正做到网页表现与内容分离的一种样式设计语言。前端设计师们都知晓CSS3 提供了很多新的特性，包括2D、3D 动画特性。CSS3 的出现可以使网页增加很多动画元素，让网页效果变得非常生动有趣且更加易于交互。在CSS3 中除了引入动画、滤镜特效和新的布局技术以外，在选择器方面也有所增加，以往在JavaScript 才能完成的工作，现在用CSS3 技术也可以达到效果。本文分享一个非常炫酷的用CSS 技术模拟万有引力定律的苹果树动画案例。把真实的项目引进课堂，就会激发学生的学习兴趣，它炫酷的效果可以给学生带来非常好的体验，也更加能吸引学生学习。然而CSS3 动画毫不疑问也不是万能的，由于它特有的一些局限性，不可能百分百实现全部的动画效果。但是CSS3 代码简单、高效等优势让设计师爱不释手，它将会成为未来Web 动画的主流。

1 动画技术的比较

Flash 的优点是制作很多复杂的动画的话，还是用Flash 制作相对要简单一些，使用代码也很少，但它要安装Flash Player 播放器。JS 动画的优点在于动画效果丰富和动画控制能力较好，对动画过程中的开始、暂停、回放、中止、取消等都可以很好地进行控制。JS 动画的代码复杂度较高。CSS3 动画的优点是代码比较简单且浏览器会对CSS3 的动画做一些优化导致动画流畅。在交互效果少的时候，CSS3 是制作动画效果比较好的选择。CSS3 动画还有一个优势就是在移动端设备上缩放矢量图形的效果比其他同行动画要好。对于各种动画和特效，强大的CSS3 都可以创建，因而网页中的图片，Flash 动画以及JavaScript 都被它取代。

2 案例教学法

案例教学法是一种以案例为基础的教学法（casebased teaching），它是一种通过模拟或者重现现实生活中的一些场景，让学生把自己纳入案例场景，通过讨论或者研讨来进行学习的一种教学方法。本文采用学生感兴趣的牛顿与苹果树案例，模拟一位男孩坐在苹果树下，一个熟透了的苹果落下来，这个苹果不偏不倚，正好打在他头上的场景。该案例的引入不仅能够吸引学生的注意，而且还能极大地调动了学生的学习兴趣。教师在这个案例中会积极的引导学生掌握两个技术要点。

3 模拟万有引力定律苹果树动画的技术要点

模拟万有引力定律的苹果树动画在过去我们只能用Flash 或JavaScript 来实现，现在CSS3 的出现可以让网页中的动画不再只依赖于Flash 和JavaScript，也不再依赖于其他编程技术。完全可以使用CSS3 中新增的模块来实现动画，一段简单的CSS3 代码就能轻而易举的实现动画效果。本文案例就是HTML5+CSS3 技术来实现模拟万有引力定律的苹果树动画（见图1）。这个案例涉及到CSS 精灵技术和CSS 动画两个技术要点。

图1 苹果树动画

3.1 CSS精灵技术

过去由于网速的原因，许多网页设计师热衷于把网页中的图片字节数限制的很小，因而在一个图片文件夹里存放着许多小图片，网页中每显示一张图片用户端都要向服务器发送一次请求，图片越多向服务器请求次数就越多，这样就会影响图片加载延迟，影响用户体验效果。随着Internet 技术的迅猛发展，用户越来越关心网页的加载速度，为了减少服务期请求数，CSS Sprites 技术出现了。

CSS Sprites 就是CSS 精灵。它又称为“CSS 图像拼合”或“CSS 贴图定位”。它就是将许多张小图片融合到一张图片里面，然后通过CSS background 背景定位技术只显示整张图片中我们需要的部分。这种CSS Sprites 技术的好处是非常明显的，它减少了HTTP 向服务器请求的次数，提升了网站性能。

本例首先准备了一张精灵图（见图2），它是由六个形状各异的苹果小图用PS 软件的拼合。用PS 拼合图片需要大量的实践就可掌握一定的技巧。本文创建了一个span 容器标签来加载精灵图片。再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，将精灵图中的某个小苹果显示到网页的固定位置（见图3）。

图2 精灵图

图3 苹果定位

3.2 CSS3动画技术

CSS3 动画（Animation）概括来说就是在一定的动画时间内暗中在某一频率内改变其CSS 某个或某些值，能够达到视觉上的转换动画效果。Animations 在动画开始值和结束值、运行时间、动画的暂停和延迟其开始时间等很多方面都是可以控制的。transition 过渡效果也可以算作一种动画，它是通过初始和结束两个状态之间的平滑过渡实现简单动画的，这种动画是单次的不重复的。而animation 则是通过关键帧@keyframes来实现更为复杂的动画效果。animation 是按照@keyframes 的定义去执行动画的，而transition 是以状态的改变触发的，有一定的局限性。CSS3 提供了类似Flash关键帧控制的动画效果，通过animation 属性实现。animation 实现动画效果主要由两个部分组成：一是通过类似Flash 动画中的关键帧声明一个动画。二是在animation 属性中调用关键帧声明的动画。

（1）animation 属性

在CSS3 中，使用animation 属性来实现动画与元素的关联，并由animation 相关的属性来控制动画的整个播放过程。CSS3 提供的animation 是一个复合属性，可分解为表1 所示的8 个独立属性，本例中苹果晃动的动画，动画名称为shake，每个苹果动画持续时间各不相同，时间函数为ease-in-out，循环次数为无限次，其余属性为默认值。

表1 animation 属性

（2）@keyframes 规则

在CSS3 中使用@keyframes 规则来创建动画，keyframes 可以设置多个关键帧，每个关键帧表示动画过程中的一个状态，多个关键帧就可以使动画十分绚丽。@keyframes 规则的语法格式如下：

@keyframes animationname{keyframes-selector{css-styles;}}

每个参数的含义见表2。

表2 @keyframes 规则属性

本例中苹果晃动动画是用@keyframes 规则创建的（见图4 所示）。在动画过程中，可以多次更改CSS 样式。本例代码中，0%，20%，40%，60%，80%，100%动画规则表达的是这个动画元素的六种状态（即六个关键帧）和处在这六种状态中时设置的CSS 样式。那些没有定义的状态（如从1%到19%）则组成了这些已定义的状态间的过渡状态。@keyframes 规则创建的苹果晃动动画的代码如下：

（3）animation 添加两个动画效果

animation-name 属性指定应用的一系列动画名称，animation-name 属性提供多个值，各个值之间使用逗号来分隔。每一个动画名称都应该对应一个@keyframes帧动画。本例中苹果先要晃动4S，然后掉落下来，这里设计了苹果晃动和苹果掉落两个动画效果，代码如下所示：

.move 元素应用了2 个动画，动画名称分别为shake 和fall。shake 是苹果晃动动画，fall 是苹果掉落动画。这是2 个独立的动画，它们会在动画周期内同时执行。如果在某一时刻对于同一个CSS 属性存在多个指定的动画行为，那么此刻在animation-name 属性值中最后出现的动画会覆盖其他的动画。为了第一个动画先播放，播放完成后，第二个动画紧接着播放。解决方法是将第二个动画的延迟时间（animation-delay）设置成第一个动画的持续时间（animation-duration）。本例fall 动画的延迟时间是shake 动画的持续时间4s。

4 结语

随着CSS3 的出现，越来越多的动画效果可以直接单纯使用CSS3 实现。CSS3 制作动画效果优势就是不需要加载额外脚本或者库。CSS3 的animation 属性是调用浏览器自身渲染引擎去实现动画，这样展示动画过程更加快速和流畅。虽然animation 的浏览器支持情况仍稍有欠缺，但animation 的效果真的十分出色。实践证明，利用纯CSS3 制作模拟万有引力定律的苹果树动画效果，给学生带来非常好的体验，提高了学生的动手实践能力，取得良好的教学效果。