Css 动画填充模式：向前比在关键帧中使用“从/到”更好吗？

对于本例，我将使用一个简单的框，作为动画，使用

opacity

和

transform:translate（）

弹出视图

我可以通过两种方式做到这一点：

• 将框的初始CSS设置为

  opacity:0

  和

  transform:translate（10px）

  ，然后编写一个仅将

  属性设置为
  的
  关键帧。然后，使用
  动画填充模式：forwards
  （在缩写中指定）保持动画的结束状态

。动画{
宽度：100px；
高度：100px；
背景：绿色；
动画：滑入。向前5秒轻松进出；
不透明度：0；
变换：translateY（10px）；
}
@关键帧滑入{
到{
不透明度：1；
变换：translateY（0）；
}
}

---

如果用户禁用了过渡和/或动画，使用第一种方法，元素将完全不可见，因为您将

不透明度：0

定义为元素的属性，而不是在

关键帧内

因此，第二种方法至少可以确保元素始终可见，即使动画由于用户设置而无法运行

请注意，这与
动画填充模式
属性没有严格的关系，因为您仍然可以通过稍微更改第一个片段的CSS来使用它：


。动画{
宽度：100px；
高度：100px；
背景：绿色；
动画：滑入。向前5秒轻松进出；
}
@关键帧滑入{
从{
不透明度：0；
变换：translateY（10px）；
}
到{
不透明度：1；
变换：translateY（0）；
}
}
我也曾想过，动画是否会禁用一些经常发生的事情？是的，它不是严格相关的，但是
forwards
属性可以从您的代码示例中删除，并且在另一个选项中需要它的地方，它也会起同样的作用。