CSS3动画技术探索与实践.doc

摘要：相比之前的CSS技术，CSS3中增加了很多新的属性，其中尤为令人瞩目是其有关动画的技术，，通过CSS3可以在浏览器中轻松地实现动画，而不像之前那样借助Flash或JavaScript。

本文首先介绍了实现CSS3动画制作的三种手段，即Transformation（变形）、Transitions（过渡）、Animations（动画）。由简到难，利用Transformation功能实现对文字或者图像旋转、缩放、倾斜和移动的变形处理，然后利用Transitions功能为元素（文字或者图像）的转变添加一些效果，如渐显、渐弱、动画快慢等，最后利用Animations功能定义多个关键帧，然后通过每个关键帧中标签的属性值来实现更复杂的动画效果。本文的主体部分是动画的程序讲解，包括猫咪脸部的笑容动画，活塞和手臂构成的加载动画。在每个程序的最后会为读者呈现动画的最终效果，使读者在阅读完程序后有直观的阅读体验。

本文将通过制作CSS3的三个动画作品，使读者对CSS3的动画相关技术的实现手段和方法有初步的了解。

关键词：Transformation  Transitions  Animations  帧

目录

摘要

ABSTRACT

1 引言-1

1.1研究背景-1

1.2研究方向-1

1.3研究意义-2

2 开发语言简介-3

3 CSS3动画的技术原理-4

3.1 CSS变形（Transformation）-4

3.2 CSS过渡（Transitions）-5

3.3 CSS动画（Animations）-6

4 CSS3动画程序-7

4.1 猫脸动画-7

4.2 转动动画-11

4.2 磁带动画-13

5 测试结果和分析-14

5.1 猫脸动画结果-14

5.2 转动动画结果-14

5.2 磁带动画结果-15

6 总结-16

参考文献-17

致谢-17