为容器添加动画后，CSS hover缩放效果失效如何解决？

问题根源是：你给div设置了animation: fadeInX 0.5s ease forwards，forwards会让动画结束后元素保持to帧的样式，而且CSS动画的属性优先级比普通选择器（包括hover）的属性更高，所以hover里的transform: scale(1.1)被动画的transform覆盖了，导致不生效。

给你两种可行的解决方案：

方案一：hover时取消原动画并补全transform属性 #

直接在hover状态里先取消动画，同时把原动画最后的位移值加到transform里，避免元素回退初始位置：

@keyframes fadeInX {
  to {
    transform: translateX(0px);
  }
}

div{
    transform: translateX(-300px) scale(1);
    animation: fadeInX 0.5s ease forwards;
}

div:hover{
    cursor: pointer;
    animation: none; /* 取消原动画的样式覆盖 */
    transform: translateX(0px) scale(1.1); /* 保留动画结束后的位移，再加上缩放 */
}

方案二：分离位移和缩放的实现属性 #

把初始位移用left（需要设置position）或者margin-left实现，让transform只负责缩放，这样就不会和动画里的transform冲突：

@keyframes fadeInX {
  to {
    left: 0;
  }
}

div{
    position: relative;
    left: -300px;
    transform: scale(1);
    animation: fadeInX 0.5s ease forwards;
}

div:hover{
    cursor: pointer;
    transform: scale(1.1);
}

内容的提问来源于stack exchange，提问作者Davi Américo