сохранение анимации css до 25% в нижней части окна - PullRequest
Новая
       21

сохранение анимации css до 25% в нижней части окна

0 голосов
/ 11 марта 2020

Есть ли способ запретить запуск анимации css до тех пор, пока пользователь не прокрутит и div не окажется на 25% от нижней части порта просмотра? Затем запустите анимацию. Я ищу что-то простое, что применимо ко всем элементам div, у которых есть анимация, они не будут называться одним и тем же классом. 

<!DOCTYPE html>
<html>
<head>

<style> 

html{overflow-x: hidden;}
div {margin-left: 0%;text-align:center;line-height:50px;
  width: 100px;overflow: hidden;
  height: 50px;
  background-color: yellow;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;margin-left: 120%;overflow: hidden;}
  to {background-color: yellow;margin-left: 0%;overflow: hidden;}
}
</style>

</head>
<body>

<p>1</p>
<Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><p>2</p><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><p>3</p>
<div class="test">Test Div</div>
<p>1</p>
<Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><p>2</p><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><p>3</p>
<div class="secondtest">Test Div2</div>
<p>1</p>
<Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><p>2</p><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><Br><p>3</p>
<div class="thirdtest">Test Div</div>
<p>4</p>

<p></p>


</body>
</html>
...