如何在点击时保持悬停状态并执行动画-html教程-PHP中文网

如何在点击时保持悬停状态并执行动画

本文介绍如何在 CSS 中实现“悬停时上移子元素，点击父容器时保持该位移并叠加摇晃动画”的效果，避免因 transform 覆盖导致位移丢失，并提供兼容性好、语义清晰的解决方案。

本文介绍如何在 css 中实现“悬停时上移子元素，点击父容器时保持该位移并叠加摇晃动画”的效果，避免因 `transform` 覆盖导致位移丢失，并提供兼容性好、语义清晰的解决方案。

要实现在 .parent:hover 时让 .child 向上平移 10px，并在 .parent:active 点击瞬间持续保持该位移的同时执行摇晃动画（shake），关键在于理解 CSS transform 的覆盖机制：当 :active 规则中仅声明 animation，而未显式重设 translateY(-10px)，浏览器会将 transform 属性重置为初始值（即 none），从而导致位移“闪退”。

✅ 正确做法是：在动画关键帧中显式组合变换，或利用独立的 rotate 属性（CSS Level 4）避免干扰 translateY。推荐以下两种稳定方案：

✅ 方案一：在 `@keyframes` 中完整声明复合 `transform`

.parent {
  width: 100px;
  height: 100px;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
.child {
  width: 50px;
  height: 50px;
  background-color: green;
  transition: transform 1s ease; /* 显式过渡 transform */
}

.parent:hover .child {
  transform: translateY(-10px);
}

.parent:active .child {
  animation: shake 1s forwards; /* 添加 forwards 保持最终帧状态 */
}

@keyframes shake {
  0% {
    transform: translateY(-10px) rotate(-10deg);
  }
  25% {
    transform: translateY(-10px) rotate(10deg);
  }
  50% {
    transform: translateY(-10px) rotate(-10deg);
  }
  75% {
    transform: translateY(-10px) rotate(10deg);
  }
  100% {
    transform: translateY(-10px) rotate(0deg);
  }
}

⚠️ 注意事项：

必须添加 animation-fill-mode: forwards（简写为 forwards），否则动画结束后 transform 会恢复到 :active 规则前的状态（即 hover 结束后的值或初始值）；

所有关键帧均需包含 translateY(-10px)，确保位移不被覆盖；

transition 应限定为 transform，避免与其他属性冲突。

✅ 方案二（现代浏览器优先）：使用独立 `rotate` 属性（无需拼接 `transform`）

@keyframes shake {
  0% { rotate: -10deg; }
  50% { rotate: 10deg; }
  100% { rotate: 0deg; }
}

此方式将旋转与位移解耦——translateY(-10px) 由 hover 控制，rotate 由动画独立驱动，天然互不干扰。但需注意：rotate 属于 CSS Transforms Level 2，目前主流浏览器（Chrome 104+, Firefox 95+, Safari 15.4+）已支持，旧版需回退至方案一。