CSS3展现精彩的动画效果 css3的动画属性_html/css_WEB-ITnose

热火朝天的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）;}

彩葫芦

用AI生成故事漫画、科普绘本、小说插画，加入彩葫芦绘画社区，一起释放创造力！

83

查看详情

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，动画一切皆有 可能。

注：由于示例页面不够完善，所以暂时不提供附件下载。