介绍Animation可以让你在不依赖javascript或jquery的情况下，用纯CSS轻松实现网页中的各种动画效果。大多数主要浏览器都很好地支持兼容性动画！尚兼容IE9的同学慎用。CSS坐标系在了解动画之前，我们需要先了解一下CSS的坐标系，因为很多动画效果都与元素的坐标密切相关。在css3中，网页不再是二维平面，而是三维空间。水平方向、垂直方向和垂直屏幕方向分别对应三维坐标系的x、y、z轴，如下图所示。箭头方向为正，否则为负（注意y轴方向与常规笛卡尔坐标系相反）。动画1。Transformstransform中文翻译为“变换”，但我更喜欢叫它“变换”（大名鼎鼎的Transformer就叫变形金刚）。我们可以使用transform函数对html元素进行各种变形，如平移、缩放、旋转、扭曲等，并且不会影响正常的文档流（documentflow）。(1)TranslateTranslate一般翻译为“翻译”，但在css中一般用作“平移”，因为translate是用来改变html元素在3d坐标系中的位置。translate支持在坐标系内任意方向移动（通过x、y、z方向向量的任意组合），单位可以是长度单位和百分比（百分比是相对于被翻译元素本身的大小，和x轴是相对于width，y轴是相对于height，z轴方向，由于元素没有'thickness'，所以对于z轴不能用百分比表示），为例子：transform:translateX(100px)translateY(50%)translateZ(-100px);//或缩写transform:translate3d(100px,50%,2em);注：translate是xy平面的2维平移，translate3d是xyz空间的3维平移；translate也可以单独写，比如translate:50%105px5rem;，但是这个特性还在实验阶段，很多浏览器都不支持，所以现阶段还是配合transform使用。有关详细信息，请参阅MDN翻译。(2)ScaleScale的意思是“缩放”，顾名思义，就是用来改变元素的大小。例如：transform:scaleX(2)scaleY(0.5)scaleZ(1);//或缩写transform:scale3d(2,0.5,1);scale方法接受任意数（正负整数、小数、0）作为参数，参数为缩放因子，系数>1的效果是放大，0<因子<1的效果是缩小，factor=0，元素的尺寸变得无限小，不可见，factor<0的效果是>0时的镜像（具体效果可以自己实验）。和translate类似，scale也有2D的scale()和3D的scale3d()，也可以单独写，这里不再赘述。(3)RotateRotate是“旋转”的意思。它支持围绕x、y和z轴旋转元素。旋转的正方向是面向正坐标轴的逆时针方向。请参考上面的坐标系图。rotate方法接受一个角度作为参数。Angle>0表示正旋转，angle<0表示负旋转。例如：//默认绕z轴旋转transform:rotate(90deg);变换：旋转X（30度）旋转Y（60度）旋转Z（-90度）；rotate与translate和scale不同，不能简写为transform:rotate3d(30deg,60deg,90deg)。rotate3d的用法是：前三个参数为数字，表示x、y、z方向的向量，对应添加向量v，第四个参数为角度，表示以向量v为逆时针旋转的角度轴，语法如下：transform:rotate3d(1,2,3,90deg);类似于平移和缩放，旋转也可以用作单独的css属性，但仍处于试验阶段。为了篇幅，我只列出三个最常用的变换函数。其余的transform函数请参考MDNtransform函数。(4)组合我们可以将不同的变换方式组合起来，比如：transform:translateY(200px)rotateZ(90deg)scale(3);组合方式的执行顺序是从右到左，即先执行scale，然后rotate，最后translate，效果依次累加。方法的编写顺序对最终的效果影响很大。请参见以下示例。沿y轴平移缩放，顺序不同，结果明显不同：如果先平移再缩放，平移距离也会按比例缩放。但是先缩放再翻译不会。所以在使用transform的时候需要按照translate->rotate->scale的顺序来写，让scale先执行，以免放大translate的效果，rotate先执行translate，防止随着平移距离旋转。我觉得这就是transform目前不方便的地方，因为方法之间的干扰不好理解，写的顺序也不好记。未来有望通过使用独立的csstransform属性来解决这个问题，因为独立的transform属性对书写顺序没有依赖，方法之间不会相互干扰。TransitionTransition译为“过渡”，强调过程。在css中，指的是元素在一段时间内从一种状态（对应css属性）过渡到另一种状态的动态过程。我们可以决定如何过渡以及花费多少时间。例如，当我们将鼠标悬停在云上使其变大时，我们可以这样写：.cloud{width:240px;transition:1s;}.cloud:hover{width:320px;}效果：transition可以和transform结合使用，比如我们可以把云变大，同时转身：.cloud:hover{width:320像素；transform:rotate(360deg);}效果：我们可以为不同的效果设置不同的过渡时间：.cloud{width:240px;transition:width1s,transform0.5s;}我们还可以给效果设置一个延迟时间，比如我们等width增加了再旋转：.cloud{width:240px;transition:width1s,transform0.5s1s;}效果：我们还可以为每个效果设置不同的计时函数来控制加速效果。例如，我们可以逐渐提高旋转速度：.cloud{width:240px;transition:transform2sease-in;}.cloud:hover{transform:rotate(1080deg);}效果：更多的定时函数请关注讨论，也可以参考MDNtransition-timing-functionsKeyframes(1)基本用法Keyframe翻译中文为“关键帧”，这是动画中非常强大的功能。通俗地说，我们可以定义动画中的关键点和关键状态。创建动画。关键帧比过渡更能控制动画过程和细节。先看一个例子（部分代码省略）html:
