首页 > 代码库 > 如何理解css3 -webkit-animation-fill-mode属性值为both时的使用方法

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

2024-07-22 01:31:43   211人阅读

大家都知道 -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时的使用方法


联系
我们