用钥匙帧和显示:无;

Question

我发现了使用keyframes和display: none;滑动动画的小提琴。它可以很好地工作。我该如何制作相同的动画，但要滑出，所以当容器消失时？在这里，我必须在此现有小提琴上更改：https：//jsfiddle.net/simurai/a9kwm/？目前，它没有动画，当它消失时。

有什么想法？

Answer 1

您真的不想为此使用键框，您想使用过渡。

div.popin {
  background: pink;
  padding: 0 5px;
  height: 0;
  opacity: 0;
  line-height: 50px;
  overflow: hidden;
  transition: all 600ms ease-in-out;
}
.container:hover div.popin {
  height: 50px;
  opacity: 1;
}

<div class="container">
  <div class="popin">Hello</div>
  <h1>Hover over me</h1>
</div>

重要的行是transition: all 600ms ease-in-out;，这意味着当某些东西发生变化时，过渡到更改并需要600毫秒才能完成。

我希望这会有所帮助。

Answer 2

使用此！

.slidedown{
  display: none;
  width: 100%;
  background: #000;
  color: #fff;
  height: 50%;
  animation: 1s slideDown;
}
@keyframes slideDown {
 0%{
   height: 0%;
 }
 100%{
   height: 50%;
 }
}

您可以使用, Seperator将动画分开，例如animation: 1s slideDown, 1s slideUp