10年5月份写过 ，那时候CSS3 动画基本上只有webkit内核的浏览器，如今CSS3已经大量的被应用到各种项目中，并且逐渐成为前端开发工程师的必备技能。虽然在项目中也经常用CSS3来优化一些体验，但是总觉的自己掌握的不够，所以最近温故知新，总结一下。欢迎大家拍砖讨论。

归纳总结了一下，我们口中说的CSS3 动画包括两种类型：

1. Transition-过渡
2. Animation-动画

他们都使我们的网页“动”起来了，两者功能类似，不过两者存在着一下细微的差别：

Transition（过渡）是通过定义元素从 起点的状态 和 结束点的状态 ，在一定的时间区间内实现元素平滑地过渡或变化 的一种补间动画机制。

而Animation（动画）不仅可以定义元素从 起点的状态 和 结束点的状态，而且他可以定义元素 在任意两个点之间的关键帧（Keyframes）的状态，在指定的时间内实现元素平滑地过渡或变化 的一种补间动画机制。

使用transition制作一个简单的transition效果时，元素包括了起点状态的属性和结束点状态的属性，一个开始执行动画时间（transition-delay）和一个延续动作时间（transition-duration）以及动作的变换速率（transition-timing-function），这样就可以进行一个简单的动画了。如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作，这样我们用Transition就很难实现了，此时我们需要关键帧（Keyframes）来更加精确的控制，在指定的时间内在关键帧（Keyframes）之间，实现元素平滑地过渡或变化 。

画了两个示意图：

Transition（过渡）示意图，1秒时间内只改某元素的颜色：

 

接下来是Animation（动画）示意图，前1秒时间内使元素变大，后2秒改变元素的颜色，并且使元素变为原来的大小：

其实Transition（过渡）下的?起点 和 结束点也可以理解为关键帧，只不过这两点间不能定义关键帧，而Animation可以起点 和 结束点之间定义任意的关键帧。至于动画是在指定的时间内，元素在两个关键帧之间 实现平滑地过渡或变化 的一种补间动画机制。当如动画的前提是元素在两个关键帧下状态存在差异，即使是很小的差异，当然我们的肉眼可能看不出来。

要是你以前做过flash动画，理解Transition（过渡）和Animation（动画）应该非常简单。如果我写的你理解不了，那么你可以看看这个??。