React中hover状态下transform属性失效，无法实现图片缩放动画

问题原因 #

你的.Headphones元素同时应用了持续运行的shake动画和hover状态的transform: scale()。由于CSS动画的属性优先级高于普通状态样式，动画会持续覆盖hover时的transform属性，导致放大效果无法生效。

解决方案 #

在hover时暂停动画，同时应用缩放效果，就能让transform属性正常生效：

修改后的CSS代码 #

.Headphones {
  /* Positioning */
  grid-column: 4 / span 2;
  grid-row: 1 / span 2;
  max-width: 20vw;
  max-height: 20vh;
  place-self: center;
  z-index: 0.5;
  display: inline-block;
  /* Float animation */
  animation: shake 30s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;

  /* 添加动画状态过渡，让暂停更平滑 */
  transition: transform 0.25s, animation-play-state 0.25s;
}
.Headphones:hover {
  /* 暂停shake动画 */
  animation-play-state: paused;
  transform: scale(1.6);
}

补充说明 #

如果希望hover时动画和缩放效果同时存在，需要调整shake动画的@keyframes，让动画中的transform与hover的transform可以叠加。例如，若shake动画基于translate实现晃动，可通过CSS变量动态保留位移值，再叠加scale：

@keyframes shake {
  0%, 100% { 
    transform: translate(0, 0);
    --shake-translate-x: 0;
    --shake-translate-y: 0;
  }
  25% { 
    transform: translate(5px, 5px);
    --shake-translate-x: 5px;
    --shake-translate-y: 5px;
  }
  50% { 
    transform: translate(0, 5px);
    --shake-translate-x: 0;
    --shake-translate-y: 5px;
  }
  75% { 
    transform: translate(-5px, 0);
    --shake-translate-x: -5px;
    --shake-translate-y: 0;
  }
}

.Headphones:hover {
  /* 叠加动画位移与hover缩放 */
  transform: translate(var(--shake-translate-x, 0), var(--shake-translate-y, 0)) scale(1.6);
}

不过这种方法实现复杂度更高，第一种暂停动画的方案更简单直接，适合大多数场景。

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