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%;
 }
}

您可以使用,分隔符来分隔动画，例如animation: 1s slideDown, 1s slideUp

使用关键帧滑出动画并显示：none;

2 个答案: