How to push the block after the animation to the bottom of the page?

Question

css

Hello, can you tell me how to make the block move out from the bottom and then nestle to the very bottom of the page after the animation in the after pseudo-selector? I'm trying, but even codepen doesn't understand me?

Answer 1

if I understand correctly

.wrapper{
  background-color: #fff;
  height: 3000px;
}

.wrap-2 {
  width: 100vw;
  height: 20vh;
  position: absolute;
  bottom: -50%;
  background-color: red;
 
  animation: go 1s linear  forwards;
}

@keyframes go{
  100%{
    position: fixed;
    bottom: 0;
  }
}