element not retaining the final value after animation

Question

Look at the css below. bottom:0 doesn't get applied at all once the animation is over

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

Here is the fiddle

http://jsfiddle.net/uk4gxr8c/

Paulie_D · Accepted Answer · 2015-12-01T13:10:24.520

You need to specify an animation-fill-mode.

In this case forwards will cause the animation to end at the final value.

Per MDN

The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of animation-direction and 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>

could u suggest how do i change this to a transform instead of bottom as i hear it's performance is better — aWebDeveloper, Dec 01 '15 at 13:30

element not retaining the final value after animation

1 Answers1