CSS @keyframes 动画不透明度有效但最后回滚

Question

我在使用 @keyframes 方法制作动画时遇到问题。
动画按我想要的方式执行，但在动画持续时间结束时，不透明度返回到错误值。
我的动画的目的是在播放不透明度时显示信息消息，并在几秒钟后隐藏它。有效。
实际状态：隐藏::显示::隐藏::显示
Objective状态：隐藏::显示::隐藏
然而在动画结束时 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 Whosebug</strong>
         </div>
      </div>
      <div class="col-sm-2"></div>
   </div>
 </div>

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

编辑：动画填充模式：转发是解决方案。

Answer 1

你可以参考这个例子：

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

DEMO FIDDLE

SEE THE PAGE

CSS @keyframes 动画不透明度有效但最后回滚

CSS @keyframes animation opacity works but rollback at the end

html

css

animation

keyframe