CSS3动画&x2B；显示属性

我已经使用以下解决方案显示和隐藏元素一段时间了。此解决方案包含一些缺点，例如操作的元素具有固定高度

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

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

使用display属性并仅修改CSS是否可以获得相同的结果？我试了很多，但还是没能弄明白

更新：

在可能之前是不可能的，对吗

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

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

---

不，这是不可能的，因为

display

不可设置动画

可动画化：没有

---

我知道这打破了您只修改CSS的规则，但是jQuery将为您节省大量代码和复杂性，特别是对于这样简单的东西。请保持专业的行为，避免不必要的强硬语言。@Jordan jQuery不好。在这种情况下，可以说它比CSS好。我更喜欢将样式和动画也留给CSS，但有时最好使用JavaScript。除非你有特定的理由，否则我不会说它“不好”。你为什么不能用它呢？或者你为什么不想呢？@不完整你的元素没有被抑制，只是被隐藏了，这是由于

不透明度

造成的<代码>显示不执行任何操作。如果我错了，请更正，该属性本身无法设置动画（因为它只有具体状态），但该属性可以在关键帧动画中使用。我看到一些例子探索了隐藏元素的想法。刚刚发布了解决方案。玩得开心。@不完整性可以在关键帧中使用，但由于

display

不能插值，所以它不应该做任何事情。您的代码没有为我抑制元素。