你有用过animation-fill-mode属性吗?它有什么应用场景?

55 阅读1分钟

"animation-fill-mode属性用于指定动画在非播放状态时的样式。

animation-fill-mode属性有四个取值:none、forwards、backwards和both。

应用场景:

  • 当动画完成后,如果希望元素保持动画最后一帧的样式,可以使用forwards值。
  • 当动画开始前,如果希望元素立即应用动画第一帧的样式,可以使用backwards值。
  • 当既想保持动画最后一帧的样式,又想在动画开始前应用第一帧的样式,可以使用both值。"