CSS收缩过渡不平滑答案

【问题标题】：CSS shrink transition not smoothCSS收缩过渡不平滑
【发布时间】：2021-09-14 07:25:09
【问题描述】：

找不到我的 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;

【问题讨论】：

请至少提供这个过渡的 gif 图像
完成，请检查

标签： css transition elementor

【解决方案1】：

这是你要找的吗？

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

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

&lt;div&gt; &lt;/div&gt;

【讨论】：

不，我只是在谈论当元素正在返回其初始状态时将鼠标从元素上移开时的收缩过渡 - 过渡并不平滑。
这正是我的sn-p所做的，当将鼠标移出黄色div时，div会平滑地恢复到原来的大小。