CSS动画——过渡与多帧动画
过渡（transition）
首先我们来文绉绉的讲一下定义哦
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
那么如何使用它呢？
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<div></div>
由于作者这网络出问题了，所以无法插入iframe 模式为大家展示，如果想查看演示，请复制代码至编译器自行查看。
| 属性 | 描述 | CSS |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | 3 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 | 3 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
简单来说，就是在创建动画或者2D或3D变换之后设置一个变换开始时间，应用过渡的属性名称，变换过渡时间和变换过程中的速度。
注意：上面提及的属性必须出现的属性是应用过渡的属性名称以及变换过程中的速度。
注意：在使用过程中一定要记着注意每个浏览器的不同，以免出现意想不到的错误。
接下来我们来谈一下 ——动画
在线引用一句话（把大象转进冰箱需要几步？答：三步）
所以制作完整的一个动画可是比大象装冰箱简单，只需要两步。
那么接下来我们就讲讲怎么讲大象装冰箱 。欧不，制作一个完整的动画?，（手动狗头?）。
第一步,创建动画（使用@keyframes规则）
创建动画的方式有多种，这里就先讲两种吧：
1.用百分比来规定变化发生的时间
本人看来。这种方法比较准确一点，适合那些在短时间内有很多变化的动画，0%代表着动画的开始，100%代表着动画的结束，在0%~100%中可以自己设置多个分界点。
例子如下：
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
上面的那段代码在0%~100%之间设置了3个分隔点。
这里有一个做的不是特别好看的简单实例（?小声比比：能看就行了）
2.用关键词 “from” 和 "to"
这个关键词的好处就是，如果你不想弄得太花里胡哨而且不想写太多代码，但是你还是想弄点动画上去，那么这个就是最佳选择了。
例子与上面那个类似，这里就不做过多讲解了
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
如果您想看一些css3动画实例那么就看一下这位大佬的掘金。
2603
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
