CSS hover触发动画持续重复卡顿问题求助

问题原因 #

你当前用position: relative+top属性实现位移动画时，元素在动画过程中实际占位位置会发生变化。当元素向下移动后，鼠标可能脱离了元素原本的hover触发区域，导致hover状态丢失，动画重置；元素回到初始位置后，hover再次被触发，如此循环往复，就出现了卡顿和动画重复播放的问题。

解决方案 #

改用transform: translateY()实现位移效果——transform仅在视觉层面改变元素位置，不会修改元素在文档流中的占位空间，元素的hover触发区域始终保持不变，不会出现状态反复切换的情况。同时transform属于GPU加速属性，渲染性能也比position布局变更更好。

修改后的代码 #

#servicios {
  text-align : center;
}
#servicios ul li {
  list-style : none;
}
.grid-container {
  display               : grid;
  grid-template-columns : auto auto auto;
  column-gap            : 50px;
  justify-content       : space-around;
}
.grid-item {
  font-family   : system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding       : 20px;
  font-size     : 30px;
  text-align    : center;
  margin-top    : 30px;
  width         : 250px;
  border-radius : 5px;
  box-shadow    : rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  /* 用transition实现平滑过渡，代码更简洁 */
  transition: transform 700ms ease-in;
}
.grid-item:hover {
  /* 替换position+top为transform */
  transform: translateY(25px);
}
.grid-text:active {
  margin-top : 20px;
}

如果坚持使用@keyframes动画，也可以修改动画内容：

/* 替换原keyframes */
@keyframes desplazamiento {
  0%   { transform: translateY(0); }
  100% { transform: translateY(25px); }
}
.grid-item:hover {
  animation: desplazamiento 700ms ease-in forwards;
}

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