宇扬信息科技工作室

因为CSS3,动画将一切皆有可能

发布: 2013-01-14 07:44:50 | 作者: 不详 | 来源: 视觉前端 | 查看: 281

热火朝天的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,动画一切皆有 可能。

    评论 0 次    最新评论(评论内容只代表网友观点,与本站立场无关!)
    发表评论
    点击更换验证码  

    ·本站大部分文章和内容来自互联网,如果您觉得我们侵犯了您的权益,请告诉我们!

    ·您在本站发表的作品,本站有权在网站内转载或引用!

    ·本站所提供的设计,摄影及其它作品,如需使用,请与原作者联系,版权归原作者所有。

    About 宇扬联系我们付款方式友情链接网站地图版权声明投稿须知帮助