Elementor下CSS缩放transition仅hover流畅，移出无过渡如何解决？

问题根因 #

transition属性仅绑定在:hover伪类选择器下，仅当元素处于hover激活状态时过渡规则才会生效。鼠标移出后元素回归非hover的默认状态，此时元素身上没有匹配的transition规则，缩放会直接跳回原始尺寸，不会触发平滑动画。

修复方案 #

将transition属性移至元素的默认状态选择器下，hover状态仅定义变换后的属性值即可，这样过渡规则会同时作用于hover触发和hover取消两个阶段。

修正后的代码（适配Elementor自定义CSS规范）

selector .elementor-column-wrap {
  /* 非hover状态就定义过渡，全场景生效 */
  transition: transform 430ms ease-in-out; 
  /* 若需要兼容极旧版webkit内核浏览器，可补充下行前缀规则 */
  /* -webkit-transition: -webkit-transform 430ms ease-in-out; */
}

selector:hover .elementor-column-wrap{
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}

异常效果演示

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