相信大家对这个属性也是比较了解的，所以也不过多的介绍其基础知识。不是很了解的话，可以在网上找一下基础知识，有很多相关的资料可以查阅。
在这里就跟大家说一下一个非常重要的标签：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，动画一切皆有 可能。
注：由于示例页面不够完善，所以暂时不提供附件下载。
下载本文