我一直在使用以下解决方案来显示和隐藏元素一段时间。这个解决方案包含一些缺点，例如被操纵的元素具有固定的高度。
@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; }
}
http://codepen.io/anon/pen/xOaPvN
是否可以使用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; }
}