Как сделать чтобы анимация включалась когда пользователь опустился до нужного блока?

@keyframes animatedBackground {
    0% { background-position: -1200px 0; }
    100% { background-position: 0px 0; }
}
@-moz-keyframes animatedBackground {
    0% { background-position: -1200px 0; }
    100% { background-position: 0px 0; }
}
@-webkit-keyframes animatedBackground {
    0% { background-position: -1200px 0; }
    100% { background-position: 0px 0; }
}
@-ms-keyframes animatedBackground {
    0% { background-position: -1200px 0; }
    100% { background-position: 0px 0; }
}
@-o-keyframes animatedBackground {
    0% { background-position: -1200px 0; }
    100% { background-position: 0px 0; }
}

.red-bg-line {
  color: white;
   background-image: url(../img/red.png);
   background-repeat: no-repeat;
   background-size: 81%;
   background-position: 0% -50px;
   animation: animatedBackground 4s ease 3s forwards;
    -moz-animation: animatedBackground 4s ease 3s forwards;
    -webkit-animation: animatedBackground 4s ease 3s forwards;
    -ms-animation: animatedBackground 4s ease 3s forwards;
    -o-animation: animatedBackground 4s ease 3s forwards;
 }