分享人：韩筠宜
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transition 是令一个或多个可以用数值表示的css属性值发生变化时产生过渡效果。
Animation字面上的意思，就是“动画”的意思， 我们使用CSS3的Animation制作动画，实现简单的幻灯片效果，可以省去复杂的js,jquery代码。Animation有一点不足之处， 我们运用Animation能创建自己想要的一些动画效果，但是有点粗糙，如果想要制作比较好的动画，大家还是使用flash或js等。
1. 如果要灵活定制多个帧以及循环，定义帧数比较精确，常于事件配合使用，用animation.
2. 如果要简单的from to 效果，用 transition.
3. 如果要使用js灵活设定动画属性，用transition.
animation: name duration timing-function delay
iteration-count direction fill-mode play-state;
animation:marginLeft 10s linear 2s infinite
100 reverse paused
在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”。 下面我们就一起来看看这个“Keyframes”是什么东西。一个动画初始属性和最终属性， 一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值， 如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作， 此时我们需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。
css===>ppt~~~
@keyframes 规则
兼容性该如何解决
在 CSS3 中创建动画，您需要学习 @keyframes 规则。
Keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头， 后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则， 有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的， 如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比， 我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果， 比如说移动，改变元素颜色，位置，大小，形状等，不过有一点需要注意的是， 我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束， 也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是， 其中"0%"不能像别的属性取值一样把百分比符号省略。
Internet Explorer 11、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
如何用JQ写幻灯片效果页面.
参考一：Baidu
参考二：JQ之家
感谢大家观看
BY:徐浩程 张增锋 | 韩筠宜