图片滚动入场动画完成后无法触发:hover效果的问题如何解决？

问题本质原因 #

1. animation-fill-mode: forwards会让元素持续持有动画最后一帧的样式，而CSS动画的样式优先级高于普通类选择器的样式，所以即便:hover规则写在后续，也无法覆盖动画锁定的opacity和transform属性
2. 初始给img设置了opacity: 0，如果不配置forwards，动画结束后元素会回到初始样式，也就是你遇到的动画结束后图片消失的问题

具体修改方案 #

无需改动JS逻辑，仅调整CSS规则即可解决两个问题：

body {
  width: 100%;
  height: 100vh;
  background-color: lightgrey;
}
/* 基础样式保持不变 */
.features-img-wrapper img {
  width: 10rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 8rem;
  opacity: 0;
  transition: all .5s;
}
/* 修改添加的动画类：将最终静态样式写在类上，而非keyframes中 */
.shift_frame_center_img {
  opacity: .85;
  transform: translateY(0);
  animation: center_img 1s 0.5s forwards;
}
/* hover规则保持不变即可正常生效 */
.features-img-wrapper img:hover {
  opacity: 1;
  transform: scale(1.035);
}
/* keyframes仅定义动画起始状态，不需要写结束状态 */
@keyframes center_img {
  0% {
    transform: translateY(20rem);
    opacity: 0;
  }
}

修改后效果：

• 图片滚动进入视口后会完成上移动画，最终停留在opacity: .85的状态，不会消失
• 鼠标hover时可以正常触发透明度变为1、放大1.035倍的交互效果

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