Question

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

我在示例中的期望效果：

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

这种情况发生在Chrome中。

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

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

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

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

＆＃13;

@-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;
}

＆＃13;

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

＆＃13;

Answer 1

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

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

CSS动画延迟在Chrome中的表现与IE / Firefox中的不同

1 个答案: