CSS 动画延迟在 Chrome 中的行为与在 IE/Firefox 中的行为不同

Question

我在对 CSS 动画使用延迟时遇到了一些问题。

示例中我想要的效果:

红色框开始透明等待 1 秒，然后淡入。

这发生在 Chrome 中。

但是，在 IE 和 Firefox 中的行为是不同的:

框开始可见，等待 1 秒，然后消失并淡出。

哪种行为是正确的？在我看来，如果要延迟动画，在动画的第一帧而不是最后一帧等待是有意义的。

有没有没有 Javascript 的解决方法？

@-webkit-keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;	
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;	
	}
}

.box {
    height: 200px;
    width: 200px;
    background: red;
    
    -webkit-animation: fadeIn 1s 1s;
    animation: fadeIn 1s 1s;
}

<div class="box"></div>

Answer 1

您可以使用 animation-fill-mode 来确定动画结束时如何“填充”它。您可以将其还原为之前、之后、初始等...这不是最直观的命名约定，但它确实允许您将动画设置为以 opacity : 0; 开始，然后保留使用 animation-fill-mode: forwards; 计算动画后您想要的值。

MDN 对此有很好的解释:https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode