一文了解animation、transition、transform、translate四个css3属性的区别

css3属性很多，并且有些无论是字母的拼写还是字面上的意思，都容易混淆。比如看了animation、transition、transform、translate这四个属性后，感觉头皮一层发麻，感觉好混乱。

要切实深入了解他们之间的区别，我们就需要在极度冷静的状态下去学习css3的这四个属性的动画效果。

一、先了解下这四个属性的含义：

（1）animation（动画）：用于设置动画属性，他是一个简写的属性，包含6个属性；

（2）transition（过渡）：用于设置元素的样式过渡，和animation有着类似的效果，但是细节上有很大的不同；

（3）transform（变形）：对元素进行2D或3D转换，可以旋转、缩放、移动或倾斜，和设置样式的动画并没有什么联系，就相当于color一样用来设置元素的“外表”；

（4）translate（移动）：translate只是transform的一个属性值，即移动。

二、这四个属性都有哪些值？

（1）animation的值介绍：

a、animation-name：指定要绑定到选择器的关键帧的名称

b、animation-duration：动画指定需要多少秒或毫秒完成

c、animation-timing-function：设置动画将如何完成一个周期

d、animation-delay：设置动画在启动前的延迟间隔

e、animation-iteration-count：定义动画的播放次数

f、animation-direction：指定是否应该轮流反向播放动画

g、animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式

h、animation-play-state：指定动画是否正在运行或已暂停

i、initial：设置属性为其默认值

j、inherit：从父元素继承属性

（2）transition的值介绍：

a、transition-property：指定CSS属性的name，transition效果

b、transition-duration：transition效果需要指定多少秒或毫秒才能完成

c、transition-timing-function：指定transition效果的转速曲线

d、transition-delay：定义transition效果开始的时候

（3）transform的值介绍：

a、none：定义不进行转换

b、matrix(n,n,n,n,n,n)：定义 2D 转换，使用六个值的矩阵

c、matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)：定义 3D 转换，使用 16 个值的 4x4 矩阵

d、translate(x,y)：定义 2D 转换

e、translate3d(x,y,z)：定义 3D 转换

f、translateX(x)：定义转换，只是用 X 轴的值

g、translateY(y)：定义转换，只是用 Y 轴的值

h、translateZ(z)：定义 3D 转换，只是用 Z 轴的值

i、scale(x[,y]?)：定义 2D 缩放转换

j、scale3d(x,y,z)：定义 3D 缩放转换

k、scaleX(x)：通过设置 X 轴的值来定义缩放转换

l、scaleY(y)：通过设置 Y 轴的值来定义缩放转换

m、scaleZ(z)：通过设置 Z 轴的值来定义 3D 缩放转换

n、rotate(angle)：定义 2D 旋转，在参数中规定角度

o、rotate3d(x,y,z,angle)：定义 3D 旋转

p、rotateX(angle)：定义沿着 X 轴的 3D 旋转

q、rotateY(angle)：定义沿着 Y 轴的 3D 旋转

r、rotateZ(angle)：定义沿着 Z 轴的 3D 旋转

s、skew(x-angle,y-angle)：定义沿着 X 和 Y 轴的 2D 倾斜转换

t、skewX(angle)：定义沿着 X 轴的 2D 倾斜转换

u、skewY(angle)：定义沿着 Y 轴的 2D 倾斜转换

v、perspective(n)：为 3D 转换元素定义透视视图

三、不同之处：

animation与transition不同的是，keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大，使得flash的部分动画效果可以由css直接控制完成，而这一切，仅仅只需要几行代码，也因此诞生了大量基于css的动画库，用来取代flash的动画部分。