元素在动画后不保留最终值

Question

看看下面的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/

Answer 1

您需要指定animation-fill-mode。

在这种情况下，forwards将导致动画以最终值结束。

每MDN

  

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

＆＃13;

＆＃13;

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

＆＃13;

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;
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;