CSS-动画显示属性

我有一个包含五个div的网页。用户可以通过单击“下一步”或“上一步”按钮在div之间切换。如果单击“下一步”，我将淡入现有的

div

，淡出现有的

div

。想象一下，翻阅一些图片

我的问题是，我只设置不透明属性的动画。因此，用户无法与可见的

div

的某些元素交互。我的直觉是这是因为它上面有一个不可见的

div

@keyframes fadeIn { from { opacity:0; } to { opacity:1; }}
@keyframes fadeOut { from { opacity:1; } to { opacity:0; }}

.fade-in {
    opacity: 0;
    position: relative;
    top: 0;
    left:1rem;

    animation: fadeIn 0.3s ease-in;
    animation-fill-mode: forwards;
}

.fade-out {
    opacity: 1;
    position: relative;
    top:0px;
    left:1rem;

    animation: fadeOut 0.3s ease-in;
    animation-fill-mode: forwards;
}

当

淡出

动画完成时，是否有一种使用CSS的方法可以将

显示

属性从

内联

更改为

无

？我知道我可以编一些jQuery。然而，这似乎有点笨拙。在0.3秒过去之后，似乎应该有一种方法可以将元素从可见更改为隐藏

---

非常感谢您的帮助。

是的，不透明度将使不可见的覆盖元素保持在顶部

设置

不透明度的动画

，但同时切换

可见性

从/到

隐藏/可见

，允许在元素处于

可见性：隐藏状态时与基础元素进行交互

---

另外，由于您需要渐变槽效果，

absolute

应该最适合您的要求，而不是

relative

。

是的，不透明度将使不可见的覆盖元素保持在顶部

设置

不透明度的动画

，但同时切换

可见性

从/到

隐藏/可见

，允许在元素处于

可见性：隐藏状态时与基础元素进行交互

---

另外，由于您需要渐变槽效果，

absolute

应该最适合您的要求，而不是

relative

。

显示属性不可设置动画，请使用visibility（visible->hidden）而不是display属性不可设置动画，请使用visibility（visible->hidden）而不是Head。我还在学习css动画。就像我有两个动画同时发生。首先是淡入淡出的效果。其次是可见性切换。如何添加第二个动画，使其在第一个动画完成后启动？@JQueryMobile您能否设置一个jsBin演示示例，以便我可以查看您现在拥有的内容以及您当前如何应用和触发动画？我仍在学习css动画。就像我有两个动画同时发生。首先是淡入淡出的效果。其次是可见性切换。如何添加第二个动画，使其在第一个动画完成后启动？@JQueryMobile您能否设置一个jsBin演示示例，让我看看您现在有什么，以及您当前如何应用和触发动画？