An Introduction to CSS Transitions & Animations

I’ve noticed in the comments of other posts recently that some readers would like more “tips and tricks” articles, particularly about CSS. So in today’s post, I’ll be providing what I hope is a useful introduction to a bit of CSS “trickery” that can be used to create compelling microinteractions across your website. Specifically, we’ll be learning how to create CSS3 transitions and animations. We’ll also be talking about when and where you might want to use them.

What Are CSS Transitions & Animations?

The evolution of CSS over the years has lead to some really amazing innovations within the language. In the case of transitions and animations, what previously required a program like Adobe Flash or another coding language altogether (such as Javascript) is now possible with nothing but HTML and CSS.

This kind of language maturity, enabled by better browsers and higher web standards (among other things), has been a huge boon to web designers who double as front end developers. They can now do more with less and the whole process of web design/development has become a bit easier.

Nevertheless, CSS transitions and animations are still considered advanced uses of CSS. A spectrum of coding I try to stay away from in most of my articles since I do not consider myself an “advanced developer”–even in language as accessible as HTML or CSS.

That said though, after reading up on W3Schools and elsewhere I think a sufficiently simple introduction to these concepts is within the grasp of not only myself but a good deal of the Elegant Themes readership as well.

To begin, I think we need to have a really good idea of what, exactly, CSS transitions and animations are before jumping into examples and code.

CSS Transitions

A CSS transition allows you to change the property values of an element over a given duration that you set. To create a transition you must first identify which CSS property you want to add an effect to and then specify the duration of the effect. If no duration is set, the transition will not occur.

There are four transition properties:

transition-delay – specifies the delay, in seconds (s), you would like to assign your transition effect.

transition-duration – specifies the duration, in seconds (s) or milliseconds (ms), you would like to assign your transition effect.

transition-property – specifies the name of the CSS property your transition effect is meant for.

transition-timing-function – Specifies the speed curve of the transition effect. Meaning, the type of speed variation you want to select for your transition effect. There is no “fast” or “slow” options. Instead there are speed curve options that go from one speed to another. Such as “ease” which tells your effect to start slow, then go fast, then end slowly.

To create a transition you only need to change one of these properties over the duration you choose. However, it is possible to change more than one property at the same time; resulting in more dramatic transitions.

CSS Animations

Where CSS transitions are all about altering element properties as they move from state to state, CSS animations are dependent on keyframes and animation properties.

keyframes – keyframes are used to define the styles an element will have at various times.

animation properties – animation properties are used to assign @keyframes to a specific element and determine how it is animated.

There are eight animation properties:

animation-delay – specifies a delay for the start of an animation.

animation-direction – specifies whether an animation should play in reverse direction or alternate cycles.

animation-duration – specifies how many seconds or milliseconds an animation takes to complete one cycle.

animation-fill-mode – specifies a style for the element when the animation is not playing. Such as when it is finished or when it has a delay.

animation-iteration-count – specifies the number of times an animation should be played.

animation-name – specifies the name of the @keyframes animation.

animation-play-state – specifies whether the animation is running or paused.

animation-timing-function – specifies the speed curve of the animation.

The examples below will show you how these things are used together in various ways. Once you understand the relationships between them you’ll be able to figure out all kinds of interesting ways to use them.

A Quick Note on Vendor Prefixes

In your personal usage of CSS transitions and animations you will most likely need to use vendor prefixes. In some of the code below you will no doubt notice some vendor prefixes. Many of the source examples do not contain vendor prefixes, so if you want to see what the code looks like without them you can check there; I thought it might be helpful to provide a fuller picture.

For the uninitiated, when I say “vendor prefix” I’m referring to a prefix that needs to be added to your CSS based on the range of browsers you want to support your transitions and animations.

A good resource for identifying the necessary prefixes for each browser is caniuse.com. You can also check out the respective pages for transitions and animations on W3Schools. Or, if you’d like to avoid the mess of prefixes altogether, you can use a tool like Bourbon.io.

CSS Transition Examples

The CSS transition examples below are all transitions I’ve found from various sources that show what’s possible with these relatively new CSS capabilities. I’ve chosen to recreate the examples I found using CodePen so you can easily take a peak at the HTML and CSS required for each example while also seeing it in action
1. Linear

See the Pen MwJaQr by nathan (@nathanbweller) on CodePen.

Example via.

2. Spin

See the Pen doNYmE by nathan (@nathanbweller) on CodePen.

Example via.

3. Color

See the Pen OVWyZN by nathan (@nathanbweller) on CodePen.

Example via.

4. Square to Circle

See the Pen WvRQJp by nathan (@nathanbweller) on CodePen.

Example via.

5. Card

See the Pen zGNvjL by nathan (@nathanbweller) on CodePen.

Example via.

CSS Animation Examples

Again, the CSS animation examples below are from various sources around the web. Just as above, the CodePen allows you to see the animation and the required code in one place. You can also follow my source links to get more information (in some cases) on each example.
1. Pulse

See the Pen pJRyEz by nathan (@nathanbweller) on CodePen.

Example via.

2. Shake

See the Pen QbdNER by nathan (@nathanbweller) on CodePen.

Example via.

3. Bouncing

See the Pen wagGWR by nathan (@nathanbweller) on CodePen.

Example via.

4. Bounce In

See the Pen GJrZqG by nathan (@nathanbweller) on CodePen.

Example via.

5. Linear Bar

See the Pen qdRZNm by nathan (@nathanbweller) on CodePen.

Example via.

Potential Use Cases for CSS Transitions & Animations

As I mentioned above, CSS transitions and animations are ideal for creating compelling and delightful microinteractions across your website. A lot of great WordPress themes and plugins come with some of these behaviors in place. A good example being the Divi Builder, which allows you to control transitions and animations within its module controls.

You may however wish to take the basics above and apply them other areas of your site in which a theme or plugin author has not given you easy control over. The following ideas might help you get started.

• An email opt-in form that makes a delightful entrance and exist; such as bouncing in and folding closed to disappear.
• A form that shakes when the essential information is not and someone attempt to submit it as finished.
• Buttons that fold open, bounce, shake, or in some other way respond to hovering and clicking.
• Preview images that turn over to reveal more information.
• Subtle background graphics that move, creating depth.
• Beautiful charts that spring into action as they load.
• Google Doodle style experiments, logos, and more.
• Games (for the really ambitious).
• Ads that you can interact with or that subtly change shape to draw attention.
• Beautiful product displays that rotate and respond to the mouse.
• Beautiful stat counters.
• And whatever else your imagination can think up.

Inspiring Showcases of CSS Transitions & Animations

If you need more visual stimulus than a list of ideas, I’ve take the liberty of compiling a small but impressive showcase of inspiring CSS transitions and animations that I hope will show off the potential illustrated in the rather basic examples I created above.

Logos in Pure CSS

Logos in Pure CSS is a great showcase of world famous logos re-created with nothing but CSS. In their current form they use animations and transitions to show how they are made and how they stack up against their traditional counterparts. However, I think it’s important to note that just creating your logo in HTML/CSS opens up a lot of interesting possibilities.

Go to Logos in Pure CSS

CSS A/Z

CSS A/Z is a showcase of HTML/CSS animated sketches; one for each letter of the alphabet. Great stuff and a lot of ideas for sprucing up seemingly insignificant elements on your website.

Go to CSS A/Z

Double Ring

I think Double Ring is a great example of something you could do with a logo to make it more eye catching and interesting.

Go to Double Ring

Navigation Bar

Navigation Bar is an example of just how dynamic and beautiful something as standard as navigation can become when given some advanced CSS love.

Go to Navigation Bar

In Pieces

In Pieces is a magnificent (and highly complex) use case of CSS animation. It’s an interactive exhibition of the evolution of 30 species of animals. Truly breathtaking and a great indicator of just how powerful a tool CSS can be.

Go to In Pieces

Additional Resources & Tutorials

In your quest to master CSS transitions and animations, there is a good chance that you’ll need or want more detail than I am able to provide in this post. Additionally, someone else’s writing style may be a bette fit for the way you think. That’s why I’ve compiled a short list of other useful resources and tutorials below for you to take advantage of.

• W3Schools Transitions
• W3Schools Animations
• Shay Howe’s Learn to Code Advanced HTML & CSS
• CSS Shapes 101
• CSS Animation for Beginners
• Simple CSS3 Transitions, Transforms, & Animations Compilation
• Hover.css – a collection of CSS3 powered hover effects
• Animate.css
• Buttons
• Hint.css
• Color.css
• 30 Cool CSS Animations You Have to See

In Conclusion

CSS transitions and animations are an extremely useful and versatile set of capabilities. You can do small subtle things or big in-your-face impressive things. But either way, it all starts with mastering the basics and moving on from there.

I hope this post is a welcome change of pace for those who have been requesting more CSS related content. If you have any more thoughts or requests on this post or future posts then please feel free to drop us a line in the comments section below.

Article Thumbnail via TCmakephoto // shutterstock.com