如何使用CSS为Div添加鼠标悬停时的缩放脉冲动画？

嘿，我看你已经有了这个动画的雏形，我把代码补全并给你解释下细节，这样就能实现流畅的悬停缩放效果了：

完整CSS代码 #

/* 定义缩放动画的关键帧 */
@keyframes hvr-pulse-grow {
  to {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}

/* 基础Div样式 */
.hvr-pulse-grow {
  height: 50px;
  width: 50px;
  background: red;
  display: inline-block;
  vertical-align: middle;
  /* 添加perspective和translateZ优化动画渲染，避免模糊 */
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent; /* 修复某些浏览器的渲染bug */
}

/* 触发动画的状态：悬停、聚焦、激活 */
.hvr-pulse-grow:hover,
.hvr-pulse-grow:focus,
.hvr-pulse-grow:active {
  -webkit-animation-name: hvr-pulse-grow;
  animation-name: hvr-pulse-grow;
  -webkit-animation-duration: 0.3s; /* 动画持续时间，可按需调整 */
  animation-duration: 0.3s;
  -webkit-animation-timing-function: ease-in-out; /* 动画节奏，缓进缓出更自然 */
  animation-timing-function: ease-in-out;
  -webkit-animation-fill-mode: both; /* 让动画结束后保持最终状态 */
  animation-fill-mode: both;
  -webkit-animation-iteration-count: 1; /* 只播放一次动画，若要循环可改成infinite */
  animation-iteration-count: 1;
}

HTML使用示例 #

<div class="hvr-pulse-grow"></div>

关键细节说明 #

• perspective(1px) translateZ(0)：这个是为了在WebKit内核的浏览器里优化动画的渲染性能，避免缩放时出现元素模糊的情况
• animation-fill-mode: both：确保动画结束后，元素保持缩放后的1.1倍状态，而不是跳回原尺寸
• 同时支持:hover、:focus和:active状态，让键盘导航的用户也能触发这个动画，提升可访问性

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