CSS3中的动画效果-Day72_html/css_WEB-ITnose
首先,要知道它的规范和用法
还记得transition的用法么:在初始的样式中加入div{transition:width(height、transform) 5s;width:100px;},然后再div:hover{width:300px},是这样来实现过渡效果的,那么动画又该如何呢?
这里动画则是先描绘出动画的整体效果,然后对于实现动画的对象进行绑定
这里用个修改于w3cschool中的例子进行记录:
@keyframes myfirst{0% {background: red; left:0px; top:0px;}25% {background: yellow; left:200px; top:0px;transform:rotate(100deg);}50% {background: blue; left:200px; top:200px;}75% {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}@-moz-keyframes myfirst /* Firefox */{0% {background: red; left:0px; top:0px;}25% {background: yellow; left:200px; top:0px;transform:rotate(100deg);}50% {background: blue; left:200px; top:200px;}75% {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}@-webkit-keyframes myfirst /* Safari 和 Chrome */{0% {background: red; left:0px; top:0px;}25% {background: yellow; left:200px; top:0px;transform:rotate(100deg);}50% {background: blue; left:200px; top:200px;}75% {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}@-o-keyframes myfirst /* Opera */{0% {background: red; left:0px; top:0px;}25% {background: yellow; left:200px; top:0pxl;transform:rotate(100deg);}50% {background: blue; left:200px; top:200px;}75% {background: green; left:0px; top:200px;}100% {background: red; left:0px; top:0px;}}
这样再找一个对象进行绑定,而这个对象你发现一个什么问题了么,left和top来描绘距离啊,肯定是绝对位置嘛,所以来写一下html部分
然后进行绑定:
div{animation: myfirst 5s;-moz-animation: myfirst 5s; /* Firefox */-webkit-animation: myfirst 5s; /* Safari 和 Chrome */-o-animation: myfirst 5s; /* Opera */-moz-animation-iteration-count: 4;}大体的步骤我们这样就了解到了,1:首先确定”动画效果“已经完成;2、找到要实现动画效果的对象;3、将动画效果和实现的对象进行绑定,如是而已。
但是有一点我们需要注意,并不是随便绑定就可以实现的,这个绑定是有条件的,那么是什么条件呢?
1、确定绑定的是哪一个动画效果,2、实现动画效果需要多长时间,如果不写,默认为不运行;
当然这是最基本的要求,而我们为了动画效果实现的更好,还可以从以下几个属性进行设置:
1、animation-iteration-count,设置设定的动画效果执行的次数,这里还要明确一点的时,当全部次数运行完后,仍然会消失
2、animation-direction,是动画效果该如何实现,是正常还是逆序;
3、animation-play-state,动画的运行效果,暂停还是运行;
4、animation-delay,动画何时开始运行
等等,通过这些属性,我们能更好的个性化的实现自己的动画效果了吧
css3在不知不觉中原来已经看了这么多了,在这个周末应该好好总结一下相关的内容了,这几天就把还没看到的几个地方再学习下好了
上一篇:
介绍三个不常用的HTML元素:、
下一篇: Cassandra代替Redis?
推荐阅读
-
css3实现的文本无法选中效果_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
CSS3中的background-size(对响应性图片等比例缩放)_html/css_WEB-ITnose
-
css中如果没有设置display,则无法显示动画效果!_html/css_WEB-ITnose
-
CSS3动画–使用贝塞尔曲线创建具有弹跳效果的扇出
-
翻滚吧少年!(自定义css3动画过渡中的贝塞尔曲线)
-
CSS3实现的鼠标悬浮开门关门效果代码实例_html/css_WEB-ITnose
-
使用css3背景渐变中的透明度来设置不同颜色的背景渐变_html/css_WEB-ITnose
-
CSS3完成图片lowpoly动画效果的过程详解
-
css3中的一些特别的单位:em、rem、vw、vh、vmin、vmax_html/css_WEB-ITnose