CSS3最容易混淆属性transition transform animation translate

点击右上方红色按钮关注“web秀”，让你真正秀起来！

前言

css属性很多，无论是字母的拼写还是字面上的意思，很多人都容易混淆，包括我在内，也时不时需要去看看到底是咋回事，是不是也混淆过你～

下面列举几个最容易混淆的属性：

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

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

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

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

下面详细介绍。

animation（动画）

语法：`animation: name duration timing-function delay iteration-count direction;`

1. name（需要绑定到选择器的 keyframe 名称）

2. duration（完成动画所花费的时间，以秒或毫秒计）

3. function（动画的速度曲线）

4. delay（动画开始之前的延迟）

5. count（动画应该播放的次数）

6. direction（是否应该轮流反向播放动画）

transition（过渡）

语法：`transition: property duration timing-function delay;`

1. property（设置过渡效果的 CSS 属性的名称）

2. duration（完成过渡效果需要多少秒或毫秒）

3. function（速度效果的速度曲线）

4. delay（过渡效果何时开始）

transform（变形）

语法：`transform: none|transform-functions;`

functions提供多种方法，如：skewX(angle)沿着 X 轴的 2D 倾斜转换，translate3d(x,y,z)3D 转换，rotate(angle)2D 旋转，在参数中规定角度等等

是不是发现羡慕已久的导航就是这样搞定的！

translate（移动）

`translate`其实是 `transform`的一种方法，进去2D或者3D移动

1. translate(x,y) 2D平移，x/y分别是x坐标平移多少像素，y坐标平移多少像素

2. translate3d(x,y,z) 3D平移，和2D一样