使用css3动画显示？如何在动画期间/之后隐藏/取消隐藏元素？

Question

我有一个div,我需要设置它的不透明度从1 - 0,然后然后隐藏它,你可能知道,添加显示属性只是覆盖过渡值并立即隐藏元素,所以我想知道是否有一个用css的方式来动画它的不透明度,然后隐藏它？

这是我尝试过的:

@keyframes infrontAnimation {
  0% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 1;
  }
  50% {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
  }
  100% {
    display: none;
  }
}

这不起作用,它只是直接隐藏,它也不会保持100%的价值:

像这样使用它:

animation: infrontAnimation 1s 2s ease-out;

所以我的问题是,是否有可能隐藏某些东西,但只有在某个动画结束后？

Answer 1

我没有设置元素的高度或宽度,而是找到了一种不同的方法,对我而言,并不像强迫高度达99.9%那样狡猾.这是我想出的:

首先,display我使用了,而不是使用隐藏和显示它,visibility因为它仍然可以中断我们的动画并最终导致它失败,我最初设置了我们的过渡属性:

注意:我将为此演示保留其他前缀:

.item {        
    transition: visibility 0s linear 0.7s, opacity 0.7s ease-in-out;
}

所以我们正在做的是将visibility属性的转换设置为0,但是将它延迟到完成淡出所需的时间(不透明度);

因此,当我们希望它可见时,我们添加了visilble类:

.item.visible {
    transition-delay: 0s;visibility: visible;opacity: 1;
}

因此我们将延迟设置为0,以便我们可以在转换时覆盖状态,显然我们不想延迟可见性,我们希望直接设置它,然后设置不透明度的动画;

然后当我们想隐藏它时:

.item.hidden {
    opacity: 0; visibility:hidden;
}

然后所有这一切都是将我们的不透明度转换回0,并将延迟保持在0.7,这样它就不会在dom中" 消失 "直到不透明度完成.

详细工作示例:FIDDLE DEMO

我希望这有助于其他观众

Answer 2

您需要设置animation-fill-mode:该值，forwards以便它在动画的最后一帧结束。

请参阅：http ://dev.w3.org/csswg/css-animations/#animation-fill-mode