CSS过渡的不同速度答案

【问题标题】：Different speeds for CSS transitionCSS过渡的不同速度
【发布时间】：2015-01-26 09:29:33
【问题描述】：

我正在使用 css 过渡来为 div 的高度设置动画。我想做的是缓慢过渡和快速过渡。

它用于下拉菜单，虽然当您最初将鼠标悬停在菜单项上时下拉菜单效果很好，但当您移动到下一个项目时，我希望上一个下拉菜单几乎立即恢复。

div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s;
  /* For Safari 3.1 to 6.0 */
  transition: width 2s;
}
div:hover {
  width: 300px;
}

<div></div>
<p>Hover over the div element above, to see the transition effect.</p>

有没有办法为输入和输出转换设置不同的持续时间？

【问题讨论】：

标签： css css-transitions

【解决方案1】：

将较慢的过渡放在div:hover 上，将较快的过渡放在 div 本身上。当:hover 状态离开时，div 转换将接管。

示例

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 0.2s;
}
div:hover {
  width: 300px;
  transition: width 2s;
}

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

【讨论】：