CSS 动画不透明度，然后将可见性设置为隐藏？

Question

我有一个区域有很多对象，包括可以点击的按钮等。

动画不透明度效果很好，但我发现不可见的按钮仍然在 Canvas 上的堆栈中，因此仍然可以点击。我想运行不透明动画，然后在完成后将元素设置为可见性隐藏...这可能吗？

我的尝试产生了一个淡入的动画，但在淡出动画可以运行之前突然从页面上消失了。

我基本上是在尝试避免 Canvas 上其他元素的干扰，但仍将它们保留在那里。

.item { opacity: 0; visibility: hidden; }
/* when a class gets added, it animates */
.animate .item {

    animation: fadeIn 2s 1s 1 normal forwards ease-out,
        fadeOut 2s 3s 1 normal forwards ease-out;

}

@keyframes fadeOut {

    1% { opacity: 1; }
    99% { opacity: 0; }
    100% { opacity: 0; visibility: hidden; }

}

@keyframes fadeIn {

    1% { opacity: 0; visibility: visible; }
    2% { opacity: 0; }
    100% { opacity: 1; }

}

我遇到了故障行为，因为该元素在完全淡出之前消失，或者可能在淡出开始时消失。

有什么解决办法吗？

谢谢，迈克尔。

Answer 1

我认为您的问题只是您在某些关键帧中省略了可见性属性。

声明在所有关键帧中动画的所有属性总是一个好主意

@keyframes fadeIn {
    1% { opacity: 0; visibility: hidden; }
    2% { opacity: 0; visibility: visible;}
    100% { opacity: 1; visibility: visible;}
}
@keyframes fadeOut {
    1% { opacity: 1; visibility: visible;}
    99% { opacity: 0; visibility: visible;}
    100% { opacity: 0; visibility: hidden; }
}

fiddle