Проиграть анимацию при попадании объекта на экран
Новичок. Делаю анимацию к объекту. Столкнулся с одной проблемой: все анимации проигрываются при загрузке страницы одновременно, но мне нужно, чтобы они проигрывались только при попадании объекта на экран. Как я могу это сделать? Немного кода:
@keyframes to-right {
0% {transform: translate(-500px);}
100% {transform: translate(0px);}
}
@keyframes to-left {
0% {transform: translate(500px);}
100% {transform: translate(0px);}
}
.animated-block1 {
width: 250px;
height: 250px;
animation: to-right 2.5s;
}
.animated-block2 {
width: 250px;
height: 250px;
animation: to-left 2.5s;
}<!DOCTYPE html>
<html>
<body>
<div class="animated-block1" style="background-color: rgb(0, 0, 0);">
</div>
<div class="animated-block2" style="background-color: rgb(255, 0, 0);">
</div>
</body>
</html>