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

最新推荐文章于 2023-09-30 22:14:38 发布

weixin_30555125

最新推荐文章于 2023-09-30 22:14:38 发布

阅读量248

点赞数

原文链接：http://www.cnblogs.com/tingting4133/p/3966221.html

版权

大家都知道 -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 }