I am struggling to animate a .alert div within its wrapper to fly up from the bottom of the wrapper by 40px. However, I am encountering difficulty as the alert div does not start at the bottom of the wrapper as intended. The desired behavior is for it to start at the bottom line, move up by 40px, and then stop. Currently, it starts at the top of the wrapper and moves out of it.
.wrapper {
width: 500px;
height: 300px;
border: 1px solid #333;
}
.alert {
width: 360px;
height: 40px;
background: red;
position: relative;
animation: flyup 2s;
animation-fill-mode: forwards;
bottom: 0px;
}
@keyframes flyup {
0% {background: green; left: 0px; bottom: 0px;}
100% {background: green; left: 0px; bottom: 40px;}
}
<div class="wrapper">
<div class="alert">This content should fly up 40px upwards in 2 seconds</div>
</div>
Fiddle: https://jsfiddle.net/Lfz4rb5d/