CSS 收缩过渡不平滑

Question

无法找到为什么我的 CSS 收缩过渡只有在我悬停鼠标时才平滑，但当鼠标移出元素时就不能平滑工作的原因。我使用 Elementor 自定义 CSS 选项卡来执行代码。

selector:hover .elementor-column-wrap{

-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
transition: transform 430ms ease-in-out;

Answer 1

这是您要找的吗？

顺便说一句，对于 box-shadow 动画，考虑动画伪元素不透明度而不是 box-shadow 本身以提高性能。检查此 link How to animate box-shadow with silky smooth performance 或 google 相似的关键字。

div:hover {
  animation: hover-in 430ms forwards;
}

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  animation: hover-out 430ms forwards;
}

@-webkit-keyframes hover-out {
  from {
    -webkit-transform: scale(0.9);
    box-shadow: 0px 20px 40px 0px rgba(244, 44, 55, .37);
  }
  to {
    -webkit-transform: scale(1);
    box-shadow: none;
  }
}

@-webkit-keyframes hover-in {
  0% {
    -webkit-transform: scale(1);
    box-shadow: none;
  }
  100% {
    -webkit-transform: scale(0.9);
    box-shadow: 0px 20px 40px 0px rgba(244, 44, 55, .37);
  }
}

<div> </div>

CSS 收缩过渡不平滑

CSS shrink transition not smooth

css

transition

elementor