Book Image

Learning AngularJS Animations

By : Richard Keller
Book Image

Learning AngularJS Animations

By: Richard Keller

Overview of this book

Table of Contents (15 chapters)
Learning AngularJS Animations
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Exercise


  1. Create one simple loading animation using three div elements that contain an animation. Each one should be filled by a black background color that increases the size from 0 to 20 px in height and width in a sequence. So, the first animation starts first, the second has a longer delay than the first one, and the third has more delay than the second one in an infinite loop.

  2. Create a loading animation using transform:rotate and CSS animations.

  3. Create an animation of a ball image or a circle that goes 100px to the right, gets back 50 px to the left, and goes 150 px to the right—all in a single animation.

  4. Create the same animation as the one in exercise 2 but in the reverse order.

  5. Create two animations similar to the animations in the guidelines of Google Material Design described at http://www.google.com/design/spec/animation/authentic-motion.html#