纯CSS实现文字淡出后保持隐藏？当前动画后文字复现

你是不是遇到了这样的问题：用CSS写的淡出动画结束后，文字又重新显示出来了？试过加display: none或者height: 0px都没达到想要的效果，还不想用JavaScript来解决？别担心，纯CSS完全能搞定！

先看看你当前的代码：

.fade-out { 
  animation: fadeOut ease 5s; 
  -webkit-animation: fadeOut ease 5s; 
  -moz-animation: fadeOut ease 5s; 
  -o-animation: fadeOut ease 5s; 
  -ms-animation: fadeOut ease 5s; 
}
@keyframes fadeOut { 
  0% { opacity: 1; } 
  100% { opacity: 0; } 
}
@-moz-keyframes fadeOut { 
  0% { opacity: 1; } 
  100% { opacity: 0; } 
}
@-webkit-keyframes fadeOut { 
  0% { opacity: 1; } 
  100% { opacity: 0; } 
}
@-o-keyframes fadeOut { 
  0% { opacity: 1; } 
  100% { opacity: 0; } 
}
@-ms-keyframes fadeOut { 
  0% { opacity: 1; } 
  100% { opacity: 0; } 
}

<h1 class="fade-out">hello</h1>

问题出在CSS动画的默认行为：动画结束后，元素会回到动画开始前的初始状态，也就是opacity: 1，所以文字又显示出来了。

解决办法：添加animation-fill-mode: forwards #

只需要给.fade-out类加上这个属性（记得加上各个浏览器的前缀版本），就能让元素在动画结束后保持最后一帧的状态：

修改后的CSS代码：

.fade-out { 
  animation: fadeOut ease 5s; 
  -webkit-animation: fadeOut ease 5s; 
  -moz-animation: fadeOut ease 5s; 
  -o-animation: fadeOut ease 5s; 
  -ms-animation: fadeOut ease 5s;
  /* 关键属性：让动画结束后保持最后一帧状态 */
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
}
@keyframes fadeOut { 
  0% { opacity: 1; } 
  100% { opacity: 0; } 
}
@-moz-keyframes fadeOut { 
  0% { opacity: 1; } 
  100% { opacity: 0; } 
}
@-webkit-keyframes fadeOut { 
  0% { opacity: 1; } 
  100% { opacity: 0; } 
}
@-o-keyframes fadeOut { 
  0% { opacity: 1; } 
  100% { opacity: 0; } 
}
@-ms-keyframes fadeOut { 
  0% { opacity: 1; } 
  100% { opacity: 0; } 
}

原理说明 #

animation-fill-mode: forwards的作用就是指定动画结束后，元素要保持动画最后一个关键帧的样式值。这里最后一帧是opacity: 0，所以动画结束后文字会一直保持透明隐藏的状态，不会再恢复显示啦～

这样既不用JavaScript，也能完美实现你想要的效果！

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