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

如何理解css3 -webkit-animation-fill-mode属性值为both时的使用方法

时间:2014-09-11 13:47:21      阅读:263      评论:0      收藏:0      [点我收藏+]

标签:style   blog   color   io   使用   ar   for   div   sp   

大家都知道 -webkit-animation-fill-mode 属性是检索或设置对象动画时间之外的状态,但是一直以来我对它的属性值都存在一个疑问,both和forwards的使用到底有什么区别呢?经过不停的测试、搜索,个人认为差别在于:
both是设置对象状态为动画结束或开始的状态,主要是取决于-webkit-animation-direction这个属性,为什么这么说呢?请看以下:
<div class="center"></div>
 1 .center{
 2     border: 1px solid #332;
 3     width: 60px;
 4     height: 60px;
 5     border-radius: 60px;
 6     background: rgba(0,0,0,0.5);
 7     -webkit-animation:ani 1s ease-in 2 alternate both;
 8 }
 9 @-webkit-keyframes ani{
10     0%{-webkit-transform:translateX(0);}
11     50%{-webkit-transform:translateX(40px);}
12     100%{-webkit-transform:translateX(100px);}
13 }

 注释:当设置方向为反方向的时候,根据动画执行的次数判断小球是否处于backwards还是forwards的状态,以上代码是执行偶数次,动画来回运动,最终回到初始状态极为backwards状态,当为奇数次时,则为结束状态forwards状态

如何理解css3 -webkit-animation-fill-mode属性值为both时的使用方法

标签:style   blog   color   io   使用   ar   for   div   sp   

原文地址:http://www.cnblogs.com/tingting4133/p/3966221.html

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