我可以设置一个元素动画使其仅在屏幕上到达某个位置时显示吗？

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