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: ...