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
About the Author
About the Reviewers

CSS styles in animations you should avoid

Position, scale, rotation, and opacity are properties that can be animated without much cost using transform: translate, transform: scale, transform: rotate, and opacity. A great tip is to change the top and left animations using tranform:translate() instead, as we did in the last sample. These properties are not frame budget expensive because they only affect composite layers and therefore, they do not need layout and paint steps.

Some styles affect the layout. This means that if you change the width of an element, other elements might be affected, so the browser will have to recalculate all trees a of elements before rendering the next frame. This is expensive, and the time it takes increases with the rise in the number of elements in this tree.

There is an article on high performance animations at

Some styles that affect the layout, apart from many others, are listed in the...