一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。
简介
css3动画是使用css3的动画属性，去控制页面元素，让元素从一种样式逐渐变化为另一种样式的效果。
实现动画的方式
transition 实现渐变动画
介绍 我们先看一下 transition 的属性： transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property 规定设置过渡效果的 CSS 属性的名称。
- transition-duration 规定完成过渡效果需要多少秒或毫秒。
- transition-timing-function 规定速度效果的速度曲线。
- transition-delay 定义过渡效果何时开始。 语法：
transition: property duration timing-function delay;
transform 转变动画
定义： transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 语法：
transform: none|transform-functions;
详细属性请参考：
animation
介绍：
animation是CSS3中的一个简写属性，可以通过设置六个动画属性来实现动画效果。这六个属性分别为动画名称、动画时间、速度曲线、动画延迟、播放次数及动画是否反向播放。
说明：
animation 属性可以设置的六个动画属性分别为：
● animation-name：规定需要绑定到选择器的 keyframe 名称。
● animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
● animation-timing-function ：规定动画的速度曲线。
● animation-delay：规定在动画开始之前的延迟。
● animation-iteration-count：规定动画应该播放的次数。
● animation-direction：规定是否应该轮流反向播放动画。
注：需始终设置 animation-duration 属性，否则当时长为 0时，就不会播放动画了。
总结
| 属性 | 含义 |
|---|---|
| transition（过度） | 用于设置元素的样式过度，和animation有着类似的效果，但细节上有很大的不同 |
| transform（变形） | 用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表” |
| translate（移动） | 只是transform的一个属性值，即移动 |
| animation（动画） | 用于设置动画属性，他是一个简写的属性，包含6个属性 |
