我可以为元素设置动画，使其仅在到达屏幕上的某个位置时才显示？答案

【问题标题】：Can I animate an element to only display once it reaches a certain place on the screen?我可以为元素设置动画，使其仅在到达屏幕上的某个位置时才显示？
【发布时间】：2019-02-17 18:36:03
【问题描述】：

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

我有两张图片：

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

【问题讨论】：

在你的默认 #line{ 规则中设置这个 right: -900px; 属性。不需要from，-webkit- 不好。
差不多了。有什么方法可以使“bg.png”图像之外的所有内容不可见？我尝试使用溢出 - 隐藏在图像上，但没有奏效。感谢您对 webkit 的关注。

标签： html css animation css-animations

【解决方案1】：

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

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

【讨论】：