element not retaining the final value after animation [duplicate] - html

Question

This question already has answers here:
Stopping a CSS3 Animation on last frame
(8 answers)
Closed 7 years ago.
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/

Answer 1

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>