Since this app does not use JavaScript for animation, you will not need to modify anything in home.ts.

The CSS will drive the animation infinitely with the following code:

animation: square 25s infinite; 
transition-timing-function: linear; 

You will also be using two points in the square keyframe:

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

So, for a 0% to 100% loop, it will move 700 px vertically and rotate 600 degrees in the duration.

The reason that each square has a different size and speed is that you can customize the CSS as per the <li> tag further. Consider the following example:

    &:nth-child(2) { 
      left: 20%; 
       
      width: 80px; 
      height: 80px; 
       
      animation-delay: 2s; 
      animation-duration: 17s; 
    } 

Since this animation does not generate a random number of square objects and there are a limited number of objects, you could write a customization for each <li> tag in the CSS.

Note that you have to put the animation with z-index: 0 because it will stay above other layers, such as form and button.