相对于当前屏幕位置的 CSS 动画

Question

我正在尝试在我的应用程序上实现一些 CSS 关键帧动画，这些动画会在不同的事件上触发。
动画包括一只独角兽从屏幕底部飞起来，在中间停了一秒钟，然后向上移出屏幕。
当不同用户在页面上的内容数量不同时，就会出现问题，从而使页面高度变大。

我希望动画相对于用户的位置停止一秒钟，在用户视图的中间，而不是相对于页面高度。

这是我目前的代码：

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

我一直在考虑一个粘性父 div，但我不确定这是否正确以及从哪里开始。
任何帮助将不胜感激！

Answer 1

试试position: fixed，而不是position: absolute，它是相对于整个文档，fixed是相对于视口，即屏幕