如何阻止CSS按钮悬停动画在页面刷新时自动播放？

问题根源 #

你当前代码中，.new-anim类直接绑定了denotch动画，页面加载时元素会自动执行该动画，这就是加载时触发移出动画的原因。同时，编写两个反向@keyframes也造成了代码冗余。

方案一：使用Transition实现（推荐） #

利用CSS transition 属性实现状态过渡是更简洁的方案，它只会在元素状态变化时触发动画，页面加载时无额外动画，且无需编写重复关键帧。

/* 初始状态，对应原移出动画的最终状态 */
.new-anim {
  clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
  /* 移出时的缓动效果 */
  transition: clip-path 300ms ease-out;
}

/* 悬停状态，对应原hover动画的最终状态 */
.new-anim:hover {
  clip-path: polygon(0% 50%, 30% 0%, 100% 0%, 100% 100%, 0% 100%);
  /* 悬停时的缓动效果 */
  transition: clip-path 300ms ease-in;
}

优势 #

• 代码量少，无需编写重复关键帧
• 页面加载时初始状态直接生效，无额外动画触发
• 可分别设置悬停和移出的缓动曲线，完全满足需求

方案二：优化Animation实现（保留关键帧） #

如果一定要使用@keyframes实现，可以调整动画触发逻辑，避免页面加载时的自动播放，同时复用单个关键帧实现反向动画。

/* 初始状态与关键帧的0%保持一致 */
.new-anim {
  clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* 悬停时执行正向动画 */
.new-anim:hover {
  animation: notch 300ms ease-in forwards;
}

/* 移出时执行反向动画，通过负延迟避免加载时播放 */
.new-anim:not(:hover) {
  animation: notch 300ms ease-out reverse forwards;
  animation-delay: -300ms;
}

/* 复用单个关键帧 */
@keyframes notch {
  0% {clip-path: polygon(0% 0%, 0% 0%, 100% 0%, 100% 100%, 0% 100%);}
  25% {clip-path: polygon(0% 12.5%, 7.5% 0%, 100% 0%, 100% 100%, 0% 100%);}
  50% {clip-path: polygon(0% 25%, 15% 0%, 100% 0%, 100% 100%, 0% 100%);}
  75% {clip-path: polygon(0% 37.5%, 22.5% 0%, 100% 0%, 100% 100%, 0% 100%);}
  100% {clip-path: polygon(0% 50%, 30% 0%, 100% 0%, 100% 100%, 0% 100%);}
}

原理 #

• 通过:not(:hover)选择器在鼠标移出时触发反向动画
• 设置animation-delay: -300ms让动画在页面加载时直接跳到结束状态（即初始clip-path），避免加载时播放动画
• 复用单个notch关键帧，通过animation-direction: reverse实现反向效果

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