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

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

Answer 1

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

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

CSS animation relative to current screen position

html

javascript

css

keyframe

css-animations

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