CSS Hover动画移出时跳变，如何实现平滑反向过渡？

我懂你遇到的这个糟心问题——鼠标移开元素时，那个灰色伪元素的收缩动画突然跳一下，完全没有展开时的平滑感对吧？咱们来拆解下问题根源，再搞定它。

问题出在哪？ #

你看你原来的代码里，transform-origin: bottom只写在了:hover状态的规则里：

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

这就意味着，只有当鼠标悬停的时候，伪元素的变换原点才是底部；一旦鼠标移出，这个属性就会重置为默认的center（元素中心）。收缩动画突然换了起点，视觉上自然就出现跳变了。

修复方案 #

把transform-origin: bottom移到伪元素的基础样式中，让它始终生效，不管是否处于hover状态：

.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);
}

这样修改后，无论是鼠标悬停时的展开动画，还是移出时的收缩动画，伪元素都会以底部为原点进行缩放，整个过渡过程就会完全平滑一致，不会再出现跳变啦！

内容的提问来源于stack exchange，提问作者misah