码迷,mamicode.com
首页 > Web开发 > 详细

CSS3中的动画效果-------Day72

时间:2017-05-02 19:39:02      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:net   dir   位置   pre   等等   height   相关   学习   距离   

还记得么,在前面也曾实现过“仅仅用css让div动起来”,还记得当时是怎么实现的么,是的,transition,针对的也比較局限,仅仅有旋转角度啊,长宽啊之类的,所以说,与其说是动起来,倒真不如说成是过渡。当然它另一个局限性,仅仅有当鼠标放上后才干够触发,仅仅是一个样式变成另一个样式,变化也比較单调,而真正的实现动画效果,css3中另一个很有效的方法:@keyframes

首先。要知道它的规范和使用方法

还记得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 style="width:100px;height:100px;position:absolute;"></div>
然后进行绑定:

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在不知不觉中原来已经看了这么多了。在这个周末应该好好总结一下相关的内容了。这几天就把还没看到的几个地方再学习下好了

技术分享



CSS3中的动画效果-------Day72

标签:net   dir   位置   pre   等等   height   相关   学习   距离   

原文地址:http://www.cnblogs.com/gavanwanggw/p/6797702.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!