O'Reilly logo

CSS Animations and Transitions for the Modern Web by Steven Bradley

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Getting Started

CSS continues to evolve as a language, and as it does it gives us a greater ability to create with code. Transforms, transitions, and CSS animations are good examples of things we could create only in graphics and animation editors. The file size of a few lines of code is measured in bytes. The size of a file containing a moving graphic is measured in megabytes and requires an additional request to the server. For the sake of performance, look first to doing things with code.

The recent design trend has been to remove signals of depth and other details used to mimic realistic objects on the screen. Unfortunately, some of those details also serve a purpose in communicating information in websites and web apps. Motion is replacing ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required