第一

Question

我试图实现一个CSS3动画淡出一个元素，然后应用display：none，我在这个问题上发现了这个想法：Animation CSS3: display + opacity

.step2 .user-input {
    animation: hideThat 1s forwards;
}

@keyframes hideThat {
    0% { opacity: 1; display: block; }
    99% { opacity: 0; display: block; }
    100% { opacity: 0; display: none; }
}

（为清楚起见，删除了所有供应商前缀。）

不透明度转换有效，但不应用display：none。我不明白我在这里做错了什么。

Answer 1

显示无法动画，Aro也给了你很好的消息来解释那么生病不重复它。但是，不要失去希望仍有解决方案

第一

保持几乎相同的行为并使用可见性属性，如您所见：

@keyframes hideThat {
    0% { height: inherit; opacity: 1; visibility: visible; }
    99% { height: inherit; opacity: 0; visibility: visible; }
    100% { height: 0; opacity: 0; visibility: hidden;}
}

你可以看到： http://jsfiddle.net/n1q3yubp/

第二

正如你在这里提出的那样“最小化”你的元素：

.step2 .user-input {
    overflow: hidden;
    animation: hideThat 1s forwards;
}

@keyframes hideThat {
    0% { height: inherit; visibility: visible; }
    99% { height: 0; visibility: visible; }
    100% { height: 0; opacity: 0; visibility: hidden;}
}

你可以在这里看到：http://jsfiddle.net/n1q3yubp/1/

CSS3不透明度动画+显示：无

1 个答案:

第一

第二