Ionic Cookbook - Third Edition

How it works...

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