如何实现图标Hover时快速缩放、移出Hover时缓慢复原的CSS过渡效果？

要实现鼠标移入时快速缩放、移出时慢速复原的效果，只需分别为图标的默认状态和hover状态设置不同的过渡时长即可：

• 默认状态（移出hover时的复原过程）设置较长的过渡时间，对应慢速复原
• hover状态（移入时的缩放过程）设置较短的过渡时间，对应快速缩放

修改后的CSS代码如下：

.banner-content #msg-icon {
  width: 4%;
  position: fixed;
  bottom: 6%;
  right: 3%;
  cursor: pointer;
  /* 移出hover时的复原过渡：时长1s，保持原有的ease-out曲线 */
  transition: transform 1s ease-out;
}
.banner-content #msg-icon:hover {
  transform: scale(2);
  /* hover时的缩放过渡：时长0.2s，用同样的曲线保证动画流畅 */
  transition: transform 0.2s ease-out;
}

说明 #

• 明确指定过渡属性为transform，比模糊的全属性过渡更精准，避免影响其他样式变化
• 默认状态的1s和hover状态的0.2s可按需调整：数值越大速度越慢，数值越小速度越快
• 保留ease-out过渡曲线，让动画收尾更自然流畅

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