CSS Animations and Transitions: Quick Guide

Introduction

CSS animations and transitions are powerful tools that can bring your web pages to life. They allow you to create smooth, engaging, visually appealing effects that enhance the user experience. Whether you're looking to add simple transitions between states or complex animations that capture attention, understanding the basics of these features is essential. In this guide, we'll cover how to create a fade-in effect, the difference between CSS transitions and animations, create an infinite keyframe animation, delay the start of a transition, and use animation timing functions to create a bounce effect.

You can interact and play with the code through the Codepens I added for each example!

How do I create a fade-in effect using CSS animations?

To create a fade-in effect, you can use the @keyframes rule to define the stages of the animation. The keyframes specify the starting and ending states of the animation, and the animation property applies the animation to an element. Here's an example:

In this code:

• The .fade-in class applies the fadeIn animation over 2 seconds with an ease-in-out timing function.

• The @keyframes fadeIn rule defines the animation, changing the opacity from 0 to 1.

What is the difference between CSS transitions and animations?

CSS Transitions:

• Used for simple state changes when an element changes from one state to another.

• Require a trigger (like :hover, :focus, or :checked) to start the transition.

• Automatically interpolates the properties from the initial state to the final state.

In this example, the background color of the .box element will transition to blue over 0.5 seconds when hovered.

CSS Animations:

• Used for more complex sequences of animations, involving multiple stages.

• Defined using @keyframes and do not require a trigger to start.

• Can run automatically, loop infinitely, and provide more control over timing and sequencing.

In this example, the .rotate class applies a continuous rotation animation that completes one full rotation every 2 seconds.

How do I create a keyframe animation that runs infinitely?

To create an animation that runs infinitely, use the animation-iteration-count property with the value infinite. This makes the animation loop indefinitely. Here's an example:

The .spin class will cause the element to rotate continuously, completing one full rotation every 2 seconds.

How can I delay the start of a CSS transition?

To delay the start of a transition, use the transition-delay property. This property specifies how long the transition should wait before starting. Here's an example:

In this example, the background color will change to hotpink 2 seconds after the :hover event is triggered, and the transition will take 0.5 seconds to complete.

How do I use the animation-timing-function to create a bounce effect?

The animation-timing-function property can be used with custom cubic-bezier values or predefined keywords to create various effects. For a bounce effect, you can define keyframes and use ease or custom cubic-bezier values. Here's an example:

In this example:

• The @keyframes bounce rule defines the bounce effect by moving the element up and down.

• The .bounce class applies the bounce animation, which repeats every 2 seconds indefinitely with an ease timing function.

Conclusion

I hope this article was helpful, see you on the next one!