例如，我们把鼠标悬浮到云上面的时候使其变大一些可以这么写：
效果：
transition可以和transform结合使用，比如我们可以让云变大的同时转一圈：
效果：
我们可以给不同的效果设置不同的过渡时间：
我们也可以给效果设置延时时间，比如我们等宽度增大之后再旋转：
效果：
我们还可以给每个效果设置不同的timing function，用于控制加速效果 。
比如我们可以让旋转的速度逐渐加快：
效果：
更多的timing function请后面会进一步讨论，也可以参考 MDN transition-timing-functions
Keyframes
(1) 基本用法
Keyframe中文译为“关键帧”，是animation中很强大的功能，通俗说就是我们可以通过定义一段动画中的关键点、关键状态来创建动画 。Keyframes相比transition对动画过程和细节有更强的控制 。
我们先看一个例子(部分代码省略)
html:
css：
效果：
但这种对书写顺序有一定要求(delay要写在duration后面，其他参数无顺序要求，css会通过传入的关键词识别) 。
(2) Animation Delay
(3) Animation Fill Modeforwards
在上面的例子中可以看到马里奥运动到右边之后又回到了起点，如果我们想让他运动完成后就停留在右边呢?很简单，我们设置annimation fill mode就可以了：
backwards
【10分钟入门CSS3 Animation】效果：
可以看到，动画开始之前小人立马移动到350px处，1s之后才开始动画 。
both
显而易见，both会同时应用forwards和backwards两种规则，即在delay时先应用第一帧的状态，结束时保持最后一帧的状态 。
(3) Animation Repeat
就像这样：
(4) Animation Direction
normal
正常方向，也是默认方向，即先from，再to 。
reverse
与正常方向相反，即先to，再from 。例如：
效果：
推荐阅读
- 多普达568新手入门
- css3.0新属性效果在ie下的解决方案介绍
- 新手入门如何查看903sh版本
- 让IE6/IE7/IE8支持CSS3属性的办法有哪些？支持CSS3属性8种方法介绍
- 3250新手入门
- 让IE6、IE7、IE8支持CSS3的圆角、阴影样式
- ie-css3.htc 让IE6, 7, and 8也支持box-shadow
- 主要针对566以及586等Q屏手机 给smartphone新手入门和软件推荐
- 解读MOTO ROKR E2之入门使用
- IE下实现类似CSS3 text-shadow文字阴影的几种方法