CSS3 Animating Full Screen

Question

• I found one very intresting example of login form: https://codepen.io/Lewitje/pen/BNNJjo but it's height is limited with 400px. I want to make background to be full screen. I changed heights to 100% but I have problem with animations.

They declared as:

@-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 declares height where boxes that fly disapears. To make background full screen I need to change this. I tried adding -100% but it isn't working.

Can you help me?

Answer 1

Try using 100vh instead.

More information about Viewport Relative Lengths here