动画填充模式:转发是否比在关键帧中使用 from/to 更好?

Question

对于此示例，我将使用一个简单的框，作为动画，使用opacity和transform: translate()弹出视图。

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

• 将框的初始 CSS 设置为opacity: 0和transform: translate(10px)，然后编写一个仅设置to属性的keyframes。然后，使用animation-fill-mode: forwards(在速记中指定(保留动画的结束状态。

.animation {
width: 100px;
height: 100px;
background: green;
animation: slide-in .5s ease-in-out forwards;
opacity: 0;
transform: translateY(10px);
}
@keyframes slide-in {
to {
opacity: 1;
transform: translateY(0);
}
}

<div class="animation"></div>

• 执行此操作的第二种方法是改为在keyframes中指定初始状态，而不是在元素本身上指定初始状态。我指定了一个from和一个to状态，并将所有内容留给动画。

.animation {
width: 100px;
height: 100px;
background: green;
animation: slide-in .5s ease-in-out;
}
@keyframes slide-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

<div class="animation"></div>

这两种方式似乎都运作良好，所以我的问题是：

这些选项中的一个是否比另一个更好？

我没有看到任何不基于意见的优点/缺点，所以我正在寻找事实优势(性能？，可访问性？

Answer 1

如果用户禁用了过渡和/或动画，使用第一种方法，元素将根本不可见，因为您将opacity: 0定义为元素的属性，而不是在keyframes内。

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

请注意，这与animation-fill-mode属性并不严格相关，因为您仍然可以通过稍微更改第一个代码段的 CSS 来使用它：

.animation {
width: 100px;
height: 100px;
background: green;
animation: slide-in .5s ease-in-out forwards;

}
@keyframes slide-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

<div class="animation"></div>