CSS animation-iteration-count失效 动画单次执行停留问题修复

动画配置不生效核心是三个错误：

• showup动画的100%关键帧错误设置了opacity: 0，animation-fill-mode: forwards的作用是保留动画最后一帧的样式，终态为透明自然会导致动画结束后第一个文字消失，看起来像配置失效
• animation-iteration-count、animation-fill-mode属于动画控制属性，只能写在绑定动画的DOM选择器规则里，写在@keyframes的关键帧内部完全不生效
• 在body、通用div、p标签这类没有绑定任何动画的选择器上写了大量动画相关属性，属于无效冗余代码，不影响效果但会干扰规则判断

所有修改都在CSS代码中，HTML结构无需调整：

1. 修改@keyframes showup的100%关键帧：将opacity:0改为opacity:1，保证动画结束时第一个文字保持显示
2. 删除所有@keyframes关键帧内部写的无效animation-iteration-count、animation-fill-mode属性
3. 清理body、通用div选择器、p标签上没有对应动画名的冗余animation-*属性
4. 保留三个实际绑定动画元素（第一个div、第二个div、第二个div内的span）上的animation-iteration-count: 1、animation-fill-mode: forwards配置即可

CSS代码 #

@import url('https://fonts.googleapis.com/css?family=Roboto:300');

body {
  text-align:center;
  background:none;
  color:white;
  font-family:'Roboto';
  font-weight:300;
  font-size:32px;
  padding-top:5vh;
  height:100vh;
  overflow:hidden;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-transform: translate3d(0,0,0);
}

div {
  display:inline-block;
  overflow:hidden;
  white-space:nowrap;
}

div:first-of-type {
  animation: showup 10s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

div:last-of-type {
  width:0px;
  animation: reveal 10s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

div:last-of-type span {
  margin-left:-355px;
  animation: slidein 10s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes showup {
    0% {opacity:0;}
    20% {opacity:1;}
    80% {opacity:1;}
    100% {opacity:1;}
}

@keyframes slidein {
    0% { margin-left:-800px; }
    20% { margin-left:-800px; }
    35% { margin-left:0px; }
    100% { margin-left:0px; }
}

@keyframes reveal {
    0% {opacity:0;width:0px;}
    20% {opacity:1;width:0px;}
    30% {width:355px;}
    80% {opacity:1;}
    100% {opacity:1;width:355px;}
}
      
@keyframes grow {
  0% { font-size: 0; }
  100% { font-size: 40px; }
}

p {
  font-size:12px;
  color:white;
  margin-top:200px;
}

HTML代码 #

<div>Escape</div> 
<div> 
  <span>into amazing experiences</span>
</div>

修改后文字入场动画仅在页面加载/手动刷新时完整执行1次，动画全程10秒，结束后所有文字保持完全显示状态，不会重复播放、不会自动隐藏，完全符合预期。

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