CSS Animate 不透明度，然后将可见性设置为隐藏？答案

【问题标题】：CSS Animate opacity, then set visibility to hidden?CSS Animate 不透明度，然后将可见性设置为隐藏？
【发布时间】：2014-04-15 03:03:16
【问题描述】：

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

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

我的尝试产生了一个淡入的动画，然后突然从页面上掉下来，然后才能运行淡出动画。

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

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

}

我的行为出现故障，因为项目在完全淡出之前消失，或者可能在淡出开始时消失。

有什么解决办法吗？

谢谢，迈克尔。

【问题讨论】：

display: none; 适合您吗？而不是visibility: hidden; ?
我希望对象保持其流动，并且显示会将其从流动中移除。
*.unselectable { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none;
简而言之：可见性和显示属性不能被动画化。
不，但它们可以转换（ish）。不知道这是否有帮助：greywyvern.com/?post=337

标签： css css-animations

【解决方案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

【讨论】：