CSS animation 相对于当前屏幕 position

Question

I'm trying to implement some CSS Keyframe animations on my application, which get triggered on different events.
The animation consists of a unicorn flying up from the bottom of the screen, stopping in the middle for a second, and then moving up out of the screen.
The problem comes when different users have different amounts on content on the page, making the page height bigger.

I want the animation to stop for a second relative to users position, in the middle of the users view, not relative to the page height.

This is my code so far:

 <img src="../***" v-if="aCounter === 1" class="unicornUp" alt="Unicorn"> 

.unicornUp {
  position:absolute;

  width:50%;
  height:50%;
  right:20%;
  opacity: 0;
  z-index:99;
  animation-name: unicornMoveUp;
  animation-duration: 3s;
   -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-delay: 0.5s;
}
@keyframes unicornMoveUp {
  from { bottom: 0; opacity: 1;}
  20% {bottom:20%;opacity: 1;transform: rotate(5deg);}
  40% {bottom: 50%;opacity: 1;}
  60% {bottom: 50%;opacity: 1; transform: rotate(-5deg);}
  80% {bottom: 60%; opacity: 1;}
  100% {bottom: 90%; opacity: 0;}
}

I've been thinking about a sticky parent div, but I'm not sure if this is even correct and where to start.
Any help would be appreciated!

Answer 1

Try position: fixed instead, as as opposed to position: absolute which is relative to the entire document, fixed is relative to the viewport ie the screen