为了账号安全,请及时绑定邮箱和手机立即绑定

关于animation-fill-mode:both

在9-9中设置both不应该是最后变为红色吗,执行的结果却是蓝色,不明白

正在回答

4 回答

backwards不是决定最终样式的,它表示元素应用动画时是否立即应用动画的初始帧,forwards表示动画执行完后停止在最后一帧的位置,最后一帧是什么样式,结果就是什么样式,明白?

0 回复 有任何疑惑可以回复我~
#1

小黍 提问者

大概懂了,forwards是表示动画执行完后停在最后一帧,就是最后一个镜头,不管是位置还是样式,backwards是决定在 animation-delay 所指定的一段时间后,在动画显示之前,应用第一帧设置的属性也就是0%时的设置。所以两者不矛盾,就相当于拍视频一个是告诉你视屏一开始应该在什么地方摆什么样的pose,一个是告诉最后应该出现在哪个地方做什么,不知道我这样描述是否正确,和你有没理解到一个点
2016-12-27 回复 有任何疑惑可以回复我~

@keyframes redToBlue{

  from{

    background: red;

  }

  20%{

      background:green;

  }

  40%{

      background:lime;

  }

  60%{

      background:yellow;

  }

  to{

    background:blue;

  }

}

.div1 {

  width: 50px;

  height: 50px;

  background: orange;

  margin: 20px auto;

  animation-name:redToBlue;

  animation-duration: 5s;

  animation-timing-function: ease;

  animation-delay: 2s;

  animation-fill-mode: none; 

}


.div2 {

  width: 50px;

  height: 50px;

  background: orange;

  margin: 20px auto;

  animation-name:redToBlue;

  animation-duration: 5s;

  animation-timing-function: ease;

  animation-delay: 2s;

  animation-fill-mode: forwards; 

}

.div3 {

  width: 50px;

  height: 50px;

  background: orange;

  margin: 20px auto;

  animation-name:redToBlue;

  animation-duration: 5s;

  animation-timing-function: ease;

  animation-delay: 2s;

  animation-fill-mode: backwards; 

}

.div4 {

  width: 50px;

  height: 50px;

  background: orange;

  margin: 20px auto;

  animation-name:redToBlue;

  animation-duration: 5s;

  animation-timing-function: ease;

  animation-delay: 2s;

  animation-fill-mode: both; 

}

自己去感受  四个div 四个class

0 回复 有任何疑惑可以回复我~

嗯,你这次描述的很正确!!

0 回复 有任何疑惑可以回复我~

设置为both,包括设置了forwards和backwards,如果设置了forwards就会在动画执行完后停止在最后一帧上,由于最后一帧是蓝色,所以执行结果就是蓝色。

0 回复 有任何疑惑可以回复我~
#1

小黍 提问者

forwords是在动画执行完后停止在最后一帧的位置,backwords是动画执行完后元素会回到第一帧的样式,一个决定样式一个决定位置的,both是同时具有两个参数的效果,如果如你所说,那就矛盾了
2016-12-24 回复 有任何疑惑可以回复我~
#2

VictorChan 回复 小黍 提问者

backwords不是执行完回到第一帧 是动画开始前提前放到第一帧 这样动画就能迅速开始运行, 默认才是结束回到第一帧
2018-06-22 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

关于animation-fill-mode:both

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信