A-A+

css3 -webkit-animation-fill-mode属性值为both

2016年03月28日 htmlcss 暂无评论 阅读 50 次

大家都知道 -webkit-animation-fill-mode 属性是检索或设置对象动画时间之外的状态,但是一直以来我对它的属性值都存在一个疑问,both和forwards的使用到底有什么区别呢?经过不停的测试、搜索,个人认为差别在于:

both是设置对象状态为动画结束或开始的状态,主要是取决于-webkit-animation-direction这个属性,为什么这么说呢?请看以下:
HTMl:
  1. <div class="center"></div>
  2. CSS:
  3. .center{
  4. border1px solid #332;
  5. width60px;
  6. height60px;
  7. border-radius: 60px;
  8. background: rgba(0,0,0,0.5);
  9. -webkit-animation:ani 1s ease-in 2 alternate both;
  10. }
  11. @-webkit-keyframes ani{
  12. 0%{-webkit-transform:translateX(0);}
  13. 50%{-webkit-transform:translateX(40px);}
  14. 100%{-webkit-transform:translateX(100px);}
  15. }
注释:当设置方向为反方向的时候,根据动画执行的次数判断小球是否处于backwards还是forwards的状态,以上代码是执行偶数次,动画来回运动,最终回到初始状态极为backwards状态,当为奇数次时,则为结束状态forwards状态.
标签:

给我留言

Copyright © web前端技术开发个人博客 保留所有权利  京ICP备14060653号 Theme  Ality

用户登录