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

Question

1. 如何让鼠标离开第一个div动画向后播放文字渐渐变小不会立刻变小？

2. 如何使向后播放速度慢5倍？

以下是Fiddle以下内容：

.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>

Answer 1

在您的示例中，只有:hover伪类具有动画。当光标离开第一个div时，立即离开悬停状态并且没有指定动画。动画也需要在.two类上设置。

---

也就是说，对于像这样的悬停效果，CSS关键帧动画可能是不必要的。我们可以使用简单的transition。

:hover伪类的转换持续时间更快，div类的转换持续时间更慢。当光标离开div并且div上较慢的转换接管时，: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>