Можно ли анимировать элемент, чтобы он отображался только после того, как он достигнет определенного места на экране?

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