CSS动画使反向动画速度变慢

Question

1. 如何使鼠标离开第一个div时动画逆向播放，文本逐渐变小而不是瞬间变小？

2. 如何使逆向播放的速度变慢5倍？

这是下面代码的演示：

.two {
  font-size: 0;
}
.one:hover + .two {
  text-align: center;
  -webkit-animation: zoom_in 0.5s ease 0s forwards;
  -moz-animation: zoom_in 0.5s ease 0s forwards;
  -o-animation: zoom_in 0.5s ease 0s forwards;
}
@-webkit-keyframes zoom_in {
  from {
    font-size: 0;
  }
  to {
    font-size: 20px;
  }
}
@-moz-keyframes zoom_in {
  from {
    font-size: 0;
  }
  to {
    font-size: 20px;
  }
}
@-o-keyframes zoom_in {
  from {
    font-size: 0;
  }
  to {
    font-size: 20px;
  }
}

<div class="one">
  Hover
</div>
<div class="two">
  Hello World!
</div>

- Roman Toasov

Answer 1

在你的例子中，只有:hover伪类有动画效果。当鼠标离开第一个

时，悬停状态立即消失，并且没有指定任何动画效果。需要在.two类上设置动画效果。

---

话虽如此，对于这样的悬停效果，CSS关键帧动画可能是不必要的。我们可以使用简单的transition。 :hover伪类给定了更快的过渡时间，

类则给定了较慢的过渡时间。当鼠标离开

时，:hover状态消失，

上的较慢过渡生效。

示例

.two {
  font-size: 0;
}
.two {
  text-align: center;
  transition: font-size 2.5s; /* slower out */
}
.one:hover + .two {
  text-align: center;
  font-size: 20px;
  transition: font-size 0.5s; /* faster in */
}

<div class="one">
  Hover
</div>
<div class="two">
  Hello World!
</div>

- misterManSam