CSS3 Анимация на весь экран

Question

• Я нашел один очень интересный пример формы входа: https://codepen.io/Lewitje/pen/BNNJjo , но его высота ограничена 400px. Я хочу сделать фон полноэкранным. Я изменил высоты на 100%, но у меня проблема с анимацией.

Они объявили, как:

@-webkit-keyframes square { 
    0% { transform: translateY(0); } 
    100% { transform: translateY(-700px) rotate(600deg); } 
} 
@keyframes square { 
    0% { transform: translateY(0); } 
    100% { transform: translateY(-700px) rotate(600deg); } 
} 

-700px объявляет высоту, где ящики, которые летают disapears. Чтобы сделать фоновый полный экран, мне нужно изменить это. Я попытался добавить -100%, но он не работает.

Вы можете мне помочь?

Answer 1

Попробуйте использовать 100vh вместо этого.

Более подробную информацию о VIEWPORT Относительные Длины here