CSS animation动画结束后元素消失 如何保持动画后可见状态

动画结束后元素消失是两个原因共同导致的：

• CSS动画默认执行完成后，元素会回退到动画开始前的原始样式，你给div设置的初始样式是visibility: hidden，动画结束后自然会恢复隐藏
• 你写的@keyframes规则里，仅在from（动画起始帧）声明了visibility: visible，to（动画结束帧）没有设置可见属性，动画本身的最终帧也没有把元素设为可见状态

两步调整即可实现元素动画结束后永久保持可见：

1. 给div的动画属性添加animation-fill-mode: forwards，该属性会让元素在动画播放结束后，一直保留动画最后一帧的样式，不会回退到初始状态
2. 把visibility: visible声明放到关键帧的to阶段（如果需要动画启动时元素就立刻可见，可以同时在from阶段也加上该声明），保证动画最终帧的可见状态正确

修正后的完整CSS代码如下：

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  visibility: hidden;
  animation: appearing-menu 0.8s;
  animation-delay: 1s;
  /* 动画结束后保留最后一帧样式 */
  animation-fill-mode: forwards;
}

@keyframes appearing-menu {
  from {
    /* 如果不需要动画启动瞬间元素就可见，可删掉这行 */
    visibility: visible;
    bottom: -50px;
    opacity: 0;
  }
  to {
    visibility: visible;
    bottom: 0px;
    opacity: 1;
  }
}

原有HTML代码不需要做任何修改，即可实现预期效果。

补充说明：visibility是离散型CSS属性，不存在过渡中间态，只要关键帧对应时间点声明了visible，元素就会直接切换到可见状态，不会和opacity一样产生渐变效果。

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