动画没有显示的作用:块到无

Question

我试图在将其折叠到宽度时展示或隐藏侧面的标题：50％

我正在使用显示：显示块：无；不知何故，我无法在其上使用动画

这是我正在使用的代码

.fade-in {
  animation: fade-in 0.5s ease-in-out both;
}
.fade-out {
  animation: fade-out 0.6s ease-in-out both;
}
@keyframes fade-in {
  0% {
    opacity: 1;
    display: block;
  }
  100% {
    opacity: 0;
    display: none;
  }
}
@keyframes fade-out {
  0% {
    opacity: 0;
    display: none;
  }
  100% {
    opacity: 1;
    display: block;
  }
}

任何想法为什么显示不起作用

Answer 1

.fade-in {
  animation: fade-in 0.5s ease-in-out both;
  background:black;
  height:200px;
  width:200px;
  margin-bottom:10px;
}
.fade-out {
  animation: fade-out 0.6s ease-in-out both;
  background:red;
  height:200px;
  width:200px;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
    display: none;
  }
  100% {
    opacity: 0;
  }
}

<div class="fade-in"></div>
<div class="fade-out"></div>