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（能否应该轮流反向播放动画）

CSS3最容易混淆属性