当鼠标离开 de <h1> 标签时，使用 css 在 <h1> 上获得一个缓慢的动画

Question

当我将光标放在我的 h1 元素上时，它会缩放 2，所以当光标离开 h1 时，我希望它 return 恢复到正常大小，但在同理……慢慢来！

.navBar h1:hover {
  color: rgb(248, 250, 144);
  transform: scale(1.7);
  transition: linear 1s;
  z-index: 10;
  text-shadow: 2px 8px 5px 1px rgba(224, 224, 117, 0.952);
}

Answer 1

将转换设置应用于非悬停状态而不是悬停规则：

.navBar h1 {
  transition: linear 1s;
}

.navBar h1:hover {
  color: rgb(248, 250, 144);
  transform: scale(1.7);
  z-index: 10;
  text-shadow: 2px 8px 5px 1px rgba(224, 224, 117, 0.952);
}

<div class="navBar">
  <h1>This is an H1 Header</h1>
</div>

Answer 2

使用 :not(:hover) 应用另一个过渡

.navBar h1:hover {
  color: rgb(248, 250, 144);
  transform: scale(1.7);
  transition: linear 1s;
  z-index: 10;
  text-shadow: 2px 8px 5px 1px rgba(224, 224, 117, 0.952);
}

.navBar h1:not(:hover){
  transform: scale(1.7);
  transition: linear 2s;
}

当鼠标离开 de <h1> 标签时，使用 css 在 <h1> 上获得一个缓慢的动画

Get a slow animations on <h1> using css when mouse out from de <h1> tag

html

css

css-transitions

css-animations