Question

我使用 @keyframes 方法遇到动画问题。
动画像我想要的那样执行，但在动画持续时间结束时，不透明度会回到错误的值我的动画的目的是在播放不透明度时显示信息消息，并在几秒钟后隐藏它。它有效。
实际状态：隐藏::显示::隐藏::显示
目标状态：隐藏::显示::隐藏
但是，在动画结束时，不透明度为 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中的动画，但这是一种正常的行为，但我还不确定。
谢谢您的帮助。

编辑：animation-fill-mode：前锋是解决方案。

Answer 1

你可以参考这个例子：

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

DEMO FIDDLE

SEE THE PAGE

CSS @keyframes动画不透明度工作但最后回滚

1 个答案: