CSS动画实现元素初始隐藏、动画结束后保持可见的方法

当前代码动画结束后隐藏是两个CSS动画默认规则导致的：

• animation默认的fill-mode属性值为none，动画执行完成后会直接回退到元素本身的原始样式，也就是你初始写的visibility: hidden状态
• 动画关键帧的100%节点没有显式声明visibility: visible，属性没有在最终帧锚定，就算调整填充模式也可能出现样式断层
• 如果直接删掉初始的visibility: hidden，1秒动画延迟期元素会直接出现在页面上，不符合时序要求

只需要两处调整即可完全符合需求：

1. 给动画添加forwards填充模式，让动画结束后永久停留在最后一帧的样式状态
2. 在动画100%关键帧补全visibility: visible声明，锚定最终可见状态

完整可运行代码如下：

CSS代码 #

.wrap{
  visibility: hidden;
  width: 54px;
  height: 54px;
  background: orange;
  /* 动画时长1s，延迟1s启动，结束后保留最终帧样式 */
  animation: wrap 1s 1s forwards;
}
@keyframes wrap{
  0% {
    transform: translateX(-300px);
    visibility: visible;
  }
  100% {
    transform: translateX(0);
    visibility: visible;
  }
}

HTML代码 #

<div class='wrap'></div>

• 0-1秒（页面加载后等待期）：元素保持初始隐藏状态，不会提前显示
• 1秒节点（动画启动瞬间）：元素出现在可视区域外左侧300px位置，变为可见
• 1-2秒（动画执行期）：元素从左侧平滑滑入可视区域，最终停留在正常位置
• 2秒后（动画结束）：元素保持可见状态，不会回退到隐藏

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