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

Question

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

动画不透明度工作很好，但我发现不可见的按钮仍然在画布的堆栈中，因此仍然可以点击。我想运行一个不透明动画，然后将项目设置为可见性隐藏，一旦它完成...这是可能的吗？

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

我基本上是在尽量避免画布上其他元素的干扰，但仍然保持在那里。

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

小提琴