What is CSS Animation?
CSS animations make it possible to animate transitions from one CSS style configuration to another.
CSS animations are made up of two basic building blocks.
- Keyframes – define the stages and styles of the animation.
- Animation Properties – assign the @keyframes to a specific CSS element and define how it is animated.
The Article CSS Animation for Beginners covers following important elements in creating CSS Animation with code.
- Animation Property Shorthand
- Note About Prefixes
- Additional Animation Properties
- Multiple Animations
- Go Forth and Animate
Advantages to CSS animations over traditional script-driven animation techniques
There are three key advantages :
- Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren’t currently visible.
The MDN web docs article, Using CSS animations, has very good examples and provides CSS code for animation. For those just getting started, we encourage you to read that article in depth.
- Animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
- A cross-browser library of CSS animations. As easy to use as an easy thing.
- Creative blog’s 18 top CSS animation examples.
- The Top 9 Animation Libraries for UI Designers
Just for fun, we also recently encountered this CSS pun site. Very creative approach (and yes, CSS animations are employed in some of the examples). We thought those teaching aspiring web professionals might be able to use many of these examples.
We always look forward to your comments and feedback (whether you are a member or not).
If you aspire to be a web professional and don’t know where to start, we offer a number of beginning classes to our members via our School Of Web learning management system. We even offer a specific class on CSS animation. As a member, your first class is free.