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

2023年10月22日 366次阅读

>如何让鼠标离开第一个div动画播放向后文字逐渐变小而不是立刻？

>如何使向后播放速度慢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>

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

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

：hover伪类的转换持续时间更快,div类的转换持续时间更慢. ：当光标离开div并且div上的较慢转换接管时,将保留：悬停状态.

例

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