остановить css анимацию, когда div достигнет конца в css и javascript

Question

У меня есть html div, который охватывает весь экран. Каждый раз, когда он загружается, он может иметь различную высоту .... Поэтому он должен прокручиваться, пока не будет достигнут конец div ...

Следующий код работает отлично, но прокручивается в большую или меньшую сторону ....

  var element = document.getElementById('main');
     var result = element.scrollHeight / document.documentElement.clientHeight;
     result = result * 50;
     var style = document.documentElement.appendChild(document.createElement("style"));
     var rule =  "slideshow { 0% { top: 0;} 100% { top: -" + result + "%;}}";
     style.sheet.insertRule("@keyframes " + rule, 0);

И css ...

 #main {
    animation: slideshow 15s linear infinite alternate;
 }