Skip to Content
Ionic Cookbook - Third Edition
book

Ionic Cookbook - Third Edition

by Indermohan Singh
April 2018
Intermediate to advanced content levelIntermediate to advanced
390 pages
8h 46m
English
Packt Publishing
Content preview from 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: ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Learning Ionic - Second Edition

Learning Ionic - Second Edition

Arvind Ravulavaru
Ionic in Action

Ionic in Action

Jeremy Wilken
Ionic : Hybrid Mobile App Development

Ionic : Hybrid Mobile App Development

Rahat Khanna, Sani Yusuf, Hoc Phan
ReasonML Quick Start Guide

ReasonML Quick Start Guide

Raphael Rafatpanah, Bruno Joseph D'mello

Publisher Resources

ISBN: 9781788623230Supplemental Content