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 像素宽。

标签： htmlcssanimationcss-animations

Answer 1

我修改了你的动画代码。希望你期待这个。

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