This question already has answers here:
Stopping a CSS3 Animation on last frame
                                
                                    (8个答案)
                                
                        
                                4年前关闭。
            
                    
看下面的css。动画结束后,bottom:0根本不会应用

div {
    width: 100%;
    position: absolute;
    z-index: 999;
    background: black;
    color: white;
    padding: 10px;
    font-weight: bold;
    -webkit-animation: mymove 1s; /* Chrome, Safari, Opera */
    animation: mymove 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

div:empty {

    -webkit-animation: mymoveClose 1s; /* Chrome, Safari, Opera */
    animation: mymoveClose 1s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {bottom: -30px;}
    to {bottom: 0px;}
}

/* Standard syntax */
@keyframes mymove {
    from {bottom: -30px;}
    to {bottom: 0px;}
}


/* Chrome, Safari, Opera */
@-webkit-keyframes mymoveClose {
    from {bottom: 0px;}
    to {bottom: -30px;}
}

/* Standard syntax */
@keyframes mymoveClose {
    from {bottom: 0px;}
    to {bottom: -30px;}
}


这是小提琴

http://jsfiddle.net/uk4gxr8c/

最佳答案

您需要指定一个animation-fill-mode

在这种情况下,forwards将使动画以最终值结束。

每个MDN


  目标将保留执行期间遇到的最后一个关键帧设置的计算值。遇到的最后一个关键帧取决于animation-direction和animation-iteration-count的值:




setTimeout(function() {
  document.getElementById('div1').innerHTML = '';
}, 3000);

div {
  width: 100%;
  position: absolute;
  z-index: 999;
  background: black;
  color: white;
  padding: 10px;
  height: 30px;
  font-weight: bold;
  box-sizing: border-box;
  -webkit-animation: mymoveClose 1s;
  /* Chrome, Safari, Opera */
  animation: mymoveClose 1s linear forwards;
}
div:empty {
  -webkit-animation: mymove 1s;
  /* Chrome, Safari, Opera */
  animation: mymove 1s linear forwards;
}
/* Chrome, Safari, Opera */

@-webkit-keyframes mymove {
  from {
    bottom: -30px;
  }
  to {
    bottom: 0px;
  }
}
/* Standard syntax */

@keyframes mymove {
  from {
    bottom: -30px;
  }
  to {
    bottom: 0px;
  }
}
/* Chrome, Safari, Opera */

@-webkit-keyframes mymoveClose {
  from {
    bottom: 0px;
  }
  to {
    bottom: -30px;
  }
}
/* Standard syntax */

@keyframes mymoveClose {
  from {
    bottom: 0px;
  }
  to {
    bottom: -30px;
  }
}

<div id="div1">linear</div>

关于html - 动画后元素不保留最终值,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/34020992/

10-12 12:24
查看更多