CSS @keyframes动画不透明度有效，但最后回滚[重复]

Question

我在使用 @keyframes 方法制作动画时遇到问题。
动画按我想要的方式执行，但在动画持续时间结束时，不透明度会回到错误的值。
我的动画的目的是在播放不透明度时显示一条信息消息，并在几秒钟后将其隐藏。它有效。
实际状态：隐藏 :: 显示 :: 隐藏 :: 显示
目标状态： 隐藏 :: 显示 :: 隐藏
然而，在动画结束时，opacity 为 1。
我给你看我的东西：

.pop_in_information{
  width: 100%;
  position: fixed;
  bottom: 1%;
  height: auto;

  animation-name: close-pop-in;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

@keyframes close-pop-in {
  0%{ opacity: 0; }
  20%{ opacity: 1; }
  80%{ opacity: 1; }
  100%{ opacity: 0; }
}

您可以在动画的结尾看到不透明度为0。其实不然。
我将 Bootstrap 用于我的 HTML。

<div class="pop_in_information">
   <div class="row text-center">
      <div class="col-sm-2"></div>
      <div class="col-sm-8">
         <div class="alert alert-success fade in no-margin">
            <a href="#" class="close" data-dismiss="alert" aria-label="close" title="close">&times;</a>
            <strong>Hi StackOverflow</strong>
         </div>
      </div>
      <div class="col-sm-2"></div>
   </div>
 </div>

也许我不理解 CSS 中的动画，这是正常行为，但我不确定。
谢谢您的帮助。

EDIT : animation-fill-mode: forwards 是解决方案。

Answer 1

你可以参考这个例子：

<div id="parent">
                Hi StackOverflow
                <div id="myDiv">
                    Hello!
                </div>
            </div>

DEMO FIDDLE

SEE THE PAGE