CSS动画opacity从0到1淡入后自动变回0如何解决？

CSS 动画默认的填充模式为none，即动画等待阶段、动画执行结束后，元素都会沿用选择器中定义的原始样式，不会保留动画过程中设置的属性。你的代码里给.pagination设置了初始opacity: 0，因此2秒淡入动画播放完成后，元素会直接回到初始透明状态，视觉上就是按钮直接消失。

给.pagination规则添加animation-fill-mode: forwards;属性即可，该配置的作用是让元素在动画结束后，始终保持动画最后一帧的样式，不会回退到初始状态。

修正后的完整代码：

.pagination {
  opacity: 0;
  animation-name: shownum;
  animation-duration: 2s;
  animation-delay: 1s;
  /* 新增该行配置 */
  animation-fill-mode: forwards;
}
@keyframes shownum {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

补充：你也可以直接把属性合并到animation简写属性中，效果完全一致，写法如下：

.pagination {
  opacity: 0;
  animation: shownum 2s 1s forwards;
}

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