html - 我可以将元素设置为仅在到达屏幕上的某个位置后才显示吗？

Question

我正在尝试为某些元素设置动画，但它看起来不正确。我希望隐藏一个元素，直到它滑过屏幕上的某个位置。

我有两张图片:

<img src='bg.png' />
<img src='line.png' id='line'/>

这是动画代码:

@keyframes line{
from   {right: -900px;}
to  {right: 0;}
}

#line{
position: absolute;
top: 170px;
animation-name: line;
animation-duration: 4s;
animation-delay: 2s;
-webkit-animation-fill-mode: forwards;
}

发生的事情是“线条”在屏幕上可见，然后它会动画化。我想要做的是隐藏“线”，直到它到达背景图像的右边缘，即 900 像素宽。

Answer 1

我修改了你的动画代码。希望您对此有所期待。

@keyframes line{
    0%  {right: -900px; opacity:0;}
    90%  {opacity:1;}
    100% {right: 0; }
    }
#line{
right: -900px;
}