热火朝天的css3无疑吸引了很多前端开发者的眼球，然而在css3中的动画属性则是新功能中的主打招牌，说到css3的动画属性不得不让人想起这三个属性：Transform﹑Transition﹑Animation。transform属性虽然看起来可以实现动画的效果，但本质其实是静态的，说白一点其实就是一个图形的变形工具；而transition属性是一个简单的动画属性，操作起来非常的简单；在这里主要为大家介绍Animations属性，这是个名副其实的动画属性，虽然官方也没有过多的介绍，只是简要的说明这个属性是transition属性的扩展，但功能可谓十分的强大，Animations可以定义多个关键帧以及定义每个关键帧中元素的属性值来实现复杂的动画效果。那么Animation可以做出怎样的动画呢？可以这么说吧，只要你有创意，你会折腾，那么将一切皆有可能。
相信大家对这个属性也是比较了解的，所以也不过多的介绍其基础知识。不是很了解的话，可以在网上找一下基础知识，有很多相关的资料可以查阅。
在这里就跟大家说一下一个非常重要的标签：keyframes。动画该怎么动？都全靠它了。keyframes的基本原理类似于flash的时间轴和关键帧，所以可以制作出很丰富的动画出来。看看简单的例子：
@keyframes demos{
from{transform:translate(0,0);}
20%{transform:translate(20,20);}
40%{transform:translate(40,0);}
60%{transform:translate(60,20);}
80%{transform:translate(80,0);}
to{transform:translate(100,20);}
}
上面的例子设置了一个名为demos的动画，其中的from、20%、40%、60%、80%、to分别代表了在不同时间点上所对应的属性效果（from、to可以用0%和100%来表示，注意的是0%不可以缩写成0）。由此可见，我们可以设置多个时间点的对应属性效果，这样子就极大的丰富了我们的动画效果。而在任意两个时间点上，Animation会自动计算中间的过渡效果，同时我们也可以通过设置Animation来对时间段进行控制从而达到高质量的动画。相对比于flash来说，Animation动画属性却毫不逊色，最大的优势是制作简单，仅仅的几行代码，却可以渲染出丰富的动画，这是flash望尘莫及的。
上面链接是给大家整理一个示例页面，其中的例子一部分是我自己制作的，一部分是来源于网络收集的，旨在为大家展示更多更精彩的动画效果，让大家可以学习的更多，如果你也有好的idea，欢迎分享给我们，添加到这个页面来，这个示例页面也将会不定期的持续更新，让更多的人都知道，因为CSS3，动画一切皆有可能。
注：由于示例页面不够完善，所以暂时不提供附件下载。
因为CSS3，动画一切皆有可能。非常不错，学习了，谢谢！要是有附件可以下载就更好了，可以给我的学生们做案例，讲解的更加生动！
新人来支持。网站很不错 学习了
在360浏览器下 经过展示动画 和 展示所有动画 完全一样，怎么解决？
漂亮，只是不会运用。
不错，喜欢css3。
太牛了，这样炫的效果，不过用起来也不太方便吧~~~
CSS3功能好强大！
实例可以提供附件的，可算学习下了
坐上沙发，观赏动画
您也可以使用第三方帐号登录
您也可以使用第三方帐号快捷注册