Animation怎么在CSS3中使用

本篇文章为大家展示了Animation怎么在CSS3 中使用，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联建站从2013年开始，是专业互联网技术服务公司，拥有项目成都网站设计、网站建设、外贸网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元合作做网站,已为上家服务,为合作各地企业和个人服务,联系电话:13518219792

兼容性

animation在绝大部分主流浏览器都得到了很好的支持！还在兼容IE9的同学要谨慎使用。

CSS 坐标系

在了解animtion之前，我们有必要先了解css的坐标系，因为很多的animation效果都和元素的坐标密切相关。在css3中网页不再是一个二维平面，而是一个三维空间，水平方向、竖直方向和垂直屏幕方向分别对应三维坐标系的x，y，z轴，如下图所示。箭头方向为正向，反之为负向（注意y轴方向与常规笛卡尔坐标系相反）。

Animations

1. Transforms

transform中文译为“转换”，但我更倾向于称呼它“变形”（大名鼎鼎的变形金刚叫transformer）。我们可以使用transform function使html元素产生各种各样的变形，比如平移、缩放、旋转、扭曲等，而且不会影响正常的文档流（document flow）。

(1) Translate

Translate一般译为“翻译”，但在css里面一般用作“平移”，因为translate用于改变html元素的在3d坐标系位置。translate支持在坐标系内任意方向移动（通过任意组合x、y、z方向的向量），单位可以是长度单位和百分比（百分比是相对于被平移的元素自身尺寸，x轴是相对于width，y轴是相对于height，而在z轴方向由于元素是没有‘厚度’的，所以对于z方向不能用百分比表示），例如：

transform: translateX(100px) translateY(50%) translateZ(-100px);
// 或者简写
transform: translate3d(100px, 50%, 2em);

注意：

translate是xy平面内的2维平移，translate3d是xyz空间内的三维平移；

translate也可以单独书写，如 translate: 50% 105px 5rem;，但是该特性尚在实验阶段，很多浏览器不支持，所以现阶段还是配合transform使用。详情参考MDN translate。

(2) Scale

Scale意为“缩放”，顾名思义，是用于改变元素的大小。例如：

transform: scaleX(2) scaleY(0.5) scaleZ(1);
// 或者简写
transform: scale3d(2, 0.5, 1);

scale方法接收任意数字（正负整数、小数、0）作为参数，该参数为缩放系数，系数>1 效果为放大，0<系数<1 效果为缩小，系数=0 元素尺寸变为无限小而不可见，系数<0 效果为 >0 时的镜像（具体效果可自己实验）。

与translate类似，scale也有2维 scale() 和三维 scale3d()之分，也可以单独书写，此处不赘述。

(3) Rotate

Rotate意为“旋转”，支持将元素以x、y、z为轴旋转，旋转正方向为面朝坐标轴正向逆时针方向，可参考上面坐标系示意图。rotate方法接收一个角度作为参数，角度>0 正向旋转，角度<0 负向旋转，例如：

// 默认绕z轴旋转
transform: rotate(90deg);
transform: rotateX(30deg) rotateY(60deg) rotateZ(-90deg);

与translate和scale不同，rotate不能简写为transform: rotate3d(30deg, 60deg, 90deg)的形式，rotate3d的用法为：前三个参数为数字，代表x、y、z方向的向量，相加得到向量v，第四个参数为角度，表示以向量v为轴逆时针旋转的角度，语法如下：

transform: rotate3d(1, 2, 3, 90deg);

与translate和scale类似，rotate也可以作为单独的css属性，但还在实验阶段。

出于篇幅考虑，我只列出三种最常用的tranform function，剩下的transform function请参考 MDN transform function。

(4) 组合

我们可以将不同的transform方法组合起来使用，如：

transform: translateY(200px) rotateZ(90deg) scale(3);

组合方法的执行顺序是从右往左，即先执行scale，然后rotate，最后translate，产生的效果是逐次累加的。方法书写的顺序对最后效果有很大的影响，看下面例子，沿y轴平移和放大，顺序不同，产生的结果有明显差别：

如果先translate再scale，平移的距离也将被等比例缩放，而先scale再translate则不会。所以在使用transform需按照 translate -> rotate -> scale 的顺序书写，让scale先执行，以免放大translate的效果，而rotate先translate执行以防止带着平移的距离一起转动。我觉得这是transform目前不方便的地方，因为方法之间相互干扰并不容易理解，书写顺序也不容易记住。在未来有望通过使用独立的css transform属性解决这一问题，因为独立的transform属性对书写顺序没有依赖，方法之间彼此不会干扰。

Transition

Transition翻译为“过渡”，强调的是过程。在css中指在一段时间内，元素从一个状态（对应一个css属性）过渡到另一个状态的动态过程。我们可以决定以何种方式过渡过渡和花费多少时间。

例如，我们把鼠标悬浮到云上面的时候使其变大一些可以这么写：

.cloud{
    width: 240px;
    transition: 1s;
}
.cloud:hover{
    width: 320px;
}

效果：

transition可以和transform结合使用，比如我们可以让云变大的同时转一圈：

.cloud:hover{
    width: 320px;
    transform: rotate(360deg);
}

效果：

我们可以给不同的效果设置不同的过渡时间：

.cloud{
    width: 240px;
    transition: width 1s, transform 0.5s;
}

我们也可以给效果设置延时时间，比如我们等宽度增大之后再旋转：

.cloud{
    width: 240px;
    transition: width 1s, transform 0.5s 1s;
}

效果：

我们还可以给每个效果设置不同的timing function，用于控制加速效果。

比如我们可以让旋转的速度逐渐加快：

.cloud{
    width: 240px;
    transition: transform 2s ease-in;
}

.cloud:hover{
    transform: rotate(1080deg);
}

效果：

更多的timing function请后面会进一步讨论，也可以参考 MDN transition-timing-functions

Keyframes

(1) 基本用法

Keyframe中文译为“关键帧”，是animation中很强大的功能，通俗说就是我们可以通过定义一段动画中的关键点、关键状态来创建动画。Keyframes相比transition对动画过程和细节有更强的控制。

我们先看一个例子（部分代码省略）

html: