CSS Animations vs CSS Transitions : Difference and Similarities

When animating anything on the web, there are two ways of using CSS to animate. The bigger question here is when to use one over the other? They both seem to the same thing. Well not exactly.

CSS Transitions and CSS Animation does have some similarities and difference. The major selection point is going to be how you want to control your animations on your page. The short answer is: for the Interactive elements, use Transitions and for Continuous decorative elements, use Animations. But there are some major factors to be considered when choosing CSS Transition vs Animations.

It's always been a challenging task to attract your website readers to keep reading your content. If the content itself has no interactivity, it could lead to less engagement. It's better to have some sort of engaging or interactive elements on the page. What could be a better way to add some transitions to the content?  If you look at any professional website template, chances are you will see interactive elements on those templates. The reason being they are more engaging.

Let's begin with a short intro to each of the transition types and discover similarities and differences.

What are Transitions?

CSS transitions are how one or more properties can change values gradually instead of switching from one value to another immediately. This makes a change in element more pleasing to the eye and subtle. The transition will automatically add some intermediate steps to the property to make the transition happen.

What are Animations?

CSS animations are a predefined set of changes on one or multiple properties that happen during the animation lifecycle without any interaction. Without any triggering element or interaction, element property values can be switched while using animations.

If both sound the same right now, That's because both share some similarity while making transitions.

Similarities between CSS Transitions and CSS Animations

1. We can define single or multiple properties that will have changes in value over time.
2. Both have a timing function that can modify the progression rate during the given time. They both share common easing functions.
3. Both can have a duration value which defines how long should it take to transit from one property value to another.
4. Since both are CSS properties, It is accessible via javascript. Any property specified using CSS rules can also be manipulated using javascript.
5. Both Makes Visual changes to the DOM element or pseudo-elements and creates intermediate values automatically.

These were the common functions of transitions and animations. Both differ with each other in terms of how they are defined and how much control they offer.

Difference between CSS Transitions and CSS Animations

1. Triggering state:

Transitions: They are triggered / can be triggered when DOM elements change. Most of the input elements have states like :active, :visited, :checked,:hover. Using those states, We can trigger Transitions.

Animations: Animations can be triggered by states or they can be declared by animation property,  they can have an infinite life cycle. Once triggered, Animation can run for a finite number of iterations.

In the below example, Animation is playing automatically, Transitions are triggered on hover. CSS animations can be triggered on scroll

2. Number of Value Changes:

Transitions: Transitions can have 2 states. A starting and an Ending state. Property values can be transited in between those two values.

Animations: Animations can have value changes with multiple properties. Properties can be manipulated by intermediate waypoints in time ranges from 0% to 100%. This gives more control for defining in-between points and setting property values for that point.

In the below example, Animation is getting multiple values in one iteration so the car can move back and forth in between starting and ending value, Transitions have a single iteration for the same duration.

3. Repetition:

Transitions: They are state-dependent. So whenever any DOM element changes state, The change happens exactly once. After the change, the property will stay at its final state until the state changes.

Animations: They are not dependent on any interaction. Once they are called, they can run for defined a number of iterations leading to infinite iteration counts. We can define how interactions will behave after the state change. We have many manipulation options for animations than transitions if we want to make it interaction-based.

In the below example, Animation is will play alternate duration and then return to the starting point, Transitions will be triggered on hover but after the end, it will stay at endpoint until the mouse is hovering over.

4. Pausing and Playing:

Transitions: They are mostly meant to happen once when interaction happens. And They Don't stop in between. The property will get either starting or ending value.

Animations: They are capable of stopping at a specific point in time. This will hold the intermediate value of the transitioned property. We can also resume animation from the point where we paused.

In the below example, Animation is Playing automatically but it can have a paused state on hover. Transitions on the other hand can't do this.

5. Calling Methods and Definition:

Transitions: They can be called directly. It doesn't require any definition of what to transit. Just by using a transition duration, Transition can be activated.

 selector{transition: [property] [duration] [timing-function] [delay];}

Animations: They have pre-defined rules defined by @keyframes which are called when the animation key is used for any element making it a two-step process.

@keyframes animation-name {keyframes-selector {property:value;}}

selector{ animation: name duration timing-function delay iteration-count direction fill-mode }

6. Javascript Interaction:

Transitions have 4 consequent properties that can be manipulated with javascript. [All Properties]

• delay
• duration
• property
• timing-function

Animation has 8 consequent properties for javascript manipulation. [All Properties]

• delay
• direction
• duration
• fill-mode
• iteration-count
• name
• play-state
• timing-function

7. Performance:

Transitions: They are used for small interactions and last for a small amount of time. CPU gives higher priority to Transitions when the interaction happens.

Animations: They can run independently of any interaction. So the browser has to run it on low priority even when it's not in the viewport.

When to use CSS Transitions?

1. Animate on scroll: Modern website uses animated elements for better user engagement. Smaller scroll animations can really improve the content of the website.
2. Buttons: Transition makes button states interactive. Since a button can hover, focused, or clicked, these interactions like distinguished by using different property values and using transitions on these properties, so that it's not just a flat button.
3. Form elements: Many of the CSS frameworks use Transitions in form elements to highlight focus or error events. A little bit of added transitions will help the active element pop than other elements.

When to use Animations?

1. Hero: It's easy to use CSS animations on Hero elements when you repeat the same set of loops again and again.
2. Background decorations: CSS animations are good for self-looping background animations or micro-interaction. so the content doesn't look boring.
3. Loop animations: Complex animation sequences can be easily made using looping animations. Just by mastering how CSS animation works, One can easily create custom animations.

To Summarize:

To create interactive elements use transitions. To create complex keyframe animations, use animations. It's more of a choice of selection on whether to use one or another. Both share some similarities. But to keep things simple, Try to use transitions when possible. Because word loop is never a better-sounding word for me when it comes to CSS.