阿牛博客

css3动画介绍之(三) – (CSS3 animation属性)

app介绍页预览 –> 可戳《联盟app下载展示页》
好了,沉底好货出场啦~(哈,开个玩笑。。),前面两节给大家介绍了css里面的transform和transition,算了给大家打了点css动画基础吧,下面这节给大家介绍最后一个常用的css动画属性:animation;
先上个例子吧,让大家了解个大概:
例子:元素向右边渐显移动,并且由正方形逐渐变成圆形:

鼠标经过我~

例子代码:

从代码中我们发现:
01.css动画主要会用到css属性animation和@keyframes(关键字),当然还有一些css属性如:transform以及一些animation-timing-function(动画预设函数),之前的章节以及详细介绍了,可戳《css3动画介绍之(一) – (CSS3 transform属性)》《css3动画介绍之(二) – (CSS3 transition属性)》查看。
02.css3动画说通俗点animation动画就是使元素从一种样式逐渐变化为另一种样式的效果。
好了,接下来给大家介绍一下animation和@keyframes:

一、animation

animation定义和用法

定义:
animation 属性是一个简写属性,用于设置六个动画属性:
01.animation-name //规定需要绑定到选择器的 keyframe 名称 (必须)

02.animation-duration //规定动画完成一个周期所花费的秒或毫秒。默认是0 (必须)

03.animation-timing-function //规定动画的速度曲线 默认是 “ease”。

04.animation-delay //规定在动画开始之前的延迟 默认是 0。

05.animation-iteration-count //规定动画该播放的次数。默认是 1。: n 定义动画播放次数的数值; infinite规定动画应该无限次播放。

06.animation-direction //规定动画是否在下一周期逆向地播放。默认是 “normal”。:normal 默认值。动画应该正常播放。alternate 动画轮流反向播放。

这里补充一个:
animation-fill-mode //检索或设置对象动画时间之外的状态,通俗点就是:规定动画在播放之前或之后,其动画效果保持在那个状态。这个属性很有用,上面的例子也用到了,大家留意一下。
参数:
none //(默认)不改变默认行为。
forwards //当动画完成后,保持最后一个属性值(保持在最后一个关键帧中定义的属性)。
backwards //在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。
both //向前和向后填充模式都被应用。)

语法:
即:animation: name duration timing-function delay iteration-count direction animation-fill-mode;
其中name、duration两项是必须参数

用法:
如需要某个元素产生动画就在该元素里面增加animation并设置相应参数即可。
animation可以用事件触发如单击元素,hover元素等,也可以页面加载的时候自动执行。

浏览器支持
Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。Safari 和 Chrome 支持替代的 -webkit-animation 属性。Internet Explorer 9 以及更早的版本不支持 animation 属性。
二、keyframes
制作animation动画,还需要一个很重要的东西keyframes,其实它就是关键帧的,学过flash的同学并不陌生吧?
通过 @keyframes 规则,您能够创建动画。创建动画的原理就是,将一套 CSS 样式逐渐变化为另一套样式。
通常我们都是以百分比来展示这些变化,或者通过关键词 “from” 和 “to”,等价于 0% 和 100%。0% 是动画的开始时间,100% 动画的结束时间。中间的百分比可以随意设定。
例子:

鼠标经过我~

代码:

这个例子比较简单,在例子中我们可以看到在keyframes里面我们配合%可以设置元素在各个针的不同变化,从而产生许许多多的动画。
之前有朋友问我一个元素怎么能连续做几个动画,如一个元素从一个位置移动过来,然后自己在旋转,其实这个比较简单,多套个div然后配合延迟就可以了。
下面就贴个示例:

鼠标经过我~

代码:

例子嵌套代码比较多,显得好长,所以写样式还是推荐用点css预编译如less,sass等。后面的教程我会出点less的教程,大家敬请期待。
其实如果在同一个页面写,公共代码太多,也可以利用less像js那样编写一些公用函数的,这样又简洁又方便。
最后附个工作中的代码截图吧:
9(@01Z9PPQXH1QT~)GU_[HI
好了,先介绍这些了,后面待续。

给个赞() 踩一下()

温馨提示:本站文章除注明转载外,均为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知 识的误导,同时有更好的阅读体验。

本文链接: http://aniublog.com/archives/116

上一篇: css3动画介绍之(二) – (CSS3 transition属性) » 下一篇: webapp开发之父盒子宽度百分百子元素均分方案 »