Ошибка автопрокрутки анимации CSS

Question

У меня есть текст с автопрокруткой, проблема в том, что перезапуск анимации перед завершением div.

Вы можете посмотреть здесь: https://jsfiddle.net/2oLf47o9/2/

Здесь анимация часть

-webkit-animation-name: move; 
-webkit-animation-duration: 5s; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-direction: up; 
-webkit-animation-timing-function: linear; 

Я хочу письма прокрутить до «Z» и перезапустить снова от «А». Как я могу это сделать?

Answer 1

Вам просто нужно увеличить высоту поля, которую ожидает анимация, когда она будет на 100% завершена. В этом случае CSS, который устанавливает, что это:

@-webkit-keyframes move { 
    0% { /* Start of the animation */ 
     margin-top: 100vh; 
    } 
    100% { /* End of the animation */ 
     margin-top: -100vh; 
    } 
} 

Таким образом, вы просто должны изменить запас 100% вариант анимации ожидает нечто более высокое (и с тем, как VH единицы работы это означает, что установка значения ниже), -200vh работал красиво, когда я тестировал этот пример.

Измененный код будет:

100% { /* End of the animation */ 
    margin-top: -200vh; 
} 

Answer 2

в этом случае лучше использовать преобразование: переводить вместо маржинального-топа, так как первое относится к ограничивающему параллелепипеду мишени (#box), а последний - размер контейнера.

@-webkit-keyframes move { 
    0% { 
     transform:translateY(100%); 
    } 
    100% { 
     transform:translateY(-100%); 
    } 
} 

demo

и версия без "задержки между итерациями"

demo2