悬停时悬停动画 "jumps"

Question

我想在 css 中实现悬停时的简单动画，但悬停时动画会跳动，看起来很傻。有没有办法避免这种情况？我希望它能像最初转变的那样坍塌。

代码笔：https://codepen.io/misah/pen/abzRXvL

.item {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background-color: blue;
  position: relative;
  transition: 800ms;
}

.item::after {
  position: absolute;
  bottom: 0;
  height: 30%;
  width: 100%;
  content: "";
  background-color: grey;
  transition: transform 800ms ease-in-out;
}

.item:hover::after {
  transform: scaleY(2);
  transform-origin: bottom;
}

<div class="item">

</div>

Answer 1

发生这种情况是因为 transform-origin: bottom; 仅在项目悬停时应用。当不悬停时，它会回落到默认值 - center。将规则移动到 ::after.

的声明

.item {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background-color: blue;
  position: relative;
  transition: 800ms;
}

.item::after {
  position: absolute;
  bottom: 0;
  height: 30%;
  width: 100%;
  content: "";
  background-color: grey;
  transition: transform 800ms ease-in-out;
  transform-origin: bottom;
}

.item:hover::after {
  transform: scaleY(2);  
}

<div class="item"></div>

悬停时悬停动画 "jumps"

Hover animation "jumps" while hovering out

html

css

hover