CSS中那些微妙模糊的属性_html/css_WEB-ITnose

在前端开发中，我经常碰到一些不能马上理解的css属性， 于是打算以后但凡碰到这些微妙又模糊的属性，都归纳到这里。

animation-fillmode属性值中的“both”
css3 动画中animation－fillmode中的“both”属性，无论谁在mdn或者w3school的文档中对该属性的解释都是：

动画将会执行 forwards 和 backwards 执行的动作

而MDN的原版文档中对该属性的解释为：

The animation will follow the rules for both forwards and backwards,
thus extending the animation properties in both directions.

这样的解释让人摸不着头脑， 实践出真知，我们还得试一下才能知道。
用demo说话：
播放次数为1，fillmode为both时的动画停留状态
播放次数为1 没有设置fillmode时的动画停留状态
附上css的代码：

立即学习“前端免费学习笔记（深入）”；

#box{  width:100px;  height:100px;  background:black;/* 在此设置有没有both以及播放次数的对比 */  -webkit-animation: move 1s ease 1 alternate both;  animation:move 1s ease 1 alternate both ;  }@-webkit-keyframes move{  100%{    -webkit-transform:translate3d(150px,0,0);    transform:translate3d(150px,0,0);     -ms-transform: translate3d(150px,0,0);}}

登录后复制

从demo中可以知道， both的属性是与动画方向（animation－direction）以及动画播放次数（animation-iteration-count）联系起来的，当方向设置为alternate时，次数为奇数次时，动画的停留状态为结束时状态（forwards），反之偶数次时为初始状态（backwards）