If you've come across elements on a website that change dynamically or in response to your on-screen actions, you may be tempted to add similar effects to your own site. Such effects can make your website interactive and help improve the user experience.
Before you can begin creating them, you have to understand what these effects are exactly. In the design world, they are either classified as transitions or animations.
In this post, we're going to define transitions and animations and explain their differences.
![Download Now: 50 Code Templates [Free Snippets]](https://no-cache.hubspot.com/cta/default/53/34adf7eb-7945-49c4-acb8-f7e177b323e5.png)
CSS Transition vs. Animation
CSS transitions and animations are similar in many ways, but distinct in terms of how complicated transitions can be, how the CSS code interacts with JavaScript, how loops work, and the methodology that triggers the animation to play. CSS transitions are generally best for simple from-to movements, while CSS animations are for more complex series of movements.
It’s easy to confuse CSS transitions and animations because they let you do similar things. Here are just a few examples:
- You can visualize property changes.
- You can set easing functions to control the rate at which property values change.
- You can set the duration of the transition or animation.
- You can specify properties that interpret changes and initiate a reaction.
- You can collect data concerning the events that cause the transition or animation to launch and use it to improve your marketing campaign.
Despite their similarities, transitions and animations are different, and there are advantages and disadvantages to both. Here's a brief overview of their differences:
| CSS Transitions | CSS Animations |
|
|
Here's an easy way to visualize the major differences between CSS transitions and animations:
Before you decide which is right for your site, you’ll need a better understanding of how a transition or animation will work on your site. Let's take a closer look.
CSS Transitions
If you just want a simple action on your site, a transition is the easiest way to go. Transitions are connected to a triggering action — most commonly, when the mouse hovers over an element. In that case, the :hover pseudo class is used to change the CSS property value, causing the element to react as desired.
You can set an element to change its color, scale, or position. You can also rotate, skew, and translate objects. If you want a bit more complicated transition, it’s even possible to affect multiple properties at once. For instance, if you want your transition to alter the background color and width, you specify entries for both background-color and width properties.
CSS Transition Properties
To create a transition, you can use the transition shorthand property, or a combination of the sub-properties below.
- transition-property: specifies the name of the CSS property the transition effect is for. So, for example, if this property is set to “width,” then the transition effect will take place when a user hovers over the element and its width begins to change.
- transition-duration: specifies the length of time the transition effect takes to complete.
- transition-timing-function: sets the pace of the transition effect.
- transition-delay: specifies when the transition effect begins.
CSS Transitions and JavaScript
Property values that are predefined in CSS may prove limiting for certain interactions. In such cases, you might want to resort to JavaScript. But if you don't want to use JavaScript entirely it's possible to set up a hybrid approach.
The transition is likely ideal if you decide to manage the more difficult aspects with JavaScript.
CSS Transition Examples
Transitions can be useful but are more basic than CSS animations. Let's take a look at a few examples.
Note: the examples below are only playing on loop because they are GIFs. Remember: transitions cannot be looped infinitely.
Stretch on Hover Example
The element below alternates between two definite states depending on where the mouse is. If hovering over the element, then the transition is triggered so the element becomes much taller but narrower, appearing stretched out.
Spacebar Counter Example
In the example below, the number of times a user hits the spacebar is "recorded" thanks to a combination of CSS and JavaScript. The number will return to 0 when the user hits the Restart button.
Button Example
When hovering over the element below, the arrow becomes a rectangle so the text "Let's go!" looks like a button.
CSS Transition Not Working
If you've created a transition but it's not working as intended, there's a few quick fixes you can look for.
1. Transition-property is set to none.
As stated above, the transition-property property specifies the name of the CSS property to which the transition is applied. This property can be defined by the keyword “all,” which indicates that all properties are to be transitioned, or by a list of properties that are to be transitioned. If, however, the property is set to “none” then no property will transition.
2. Transition-duration is not defined, or set to zero or a negative value.
As stated above, the transition-duration property specifies the length of time that a transition takes. It can be set to any positive value. If the property is not defined, then the value will be considered zero seconds. The element will still change from one state to the next but the change will be instant — no animation will occur.
A negative value renders the declaration invalid so it will be assumed that the property is not defined.
To understand how this will look, compare the two transition effects below.
See the Pen by Christina Perricone (@hubspot) on CodePen.
When to Use Transition vs Animation
Let's recap the ideal use cases for using transitions over animations:
- Creating simple from-to movements
- Having an effect take place only when the user interacts with an element by hovering or clicking on it
- Using JavaScript
- Designing buttons to change color or size when user hovers over it
CSS Animations
Animations are more complicated, but will also give you more flexibility — the more flexible, the more parts involved. With CSS animations, you can set different stages that alter the behavior of the element multiple times in its duration. This gives you more control over the property values in animations.
To do this, you define a set of keyframes. Keyframes indicate the start and end of the animation, as well as any intermediate steps between the start and end. In other words, each keyframe describes how the animated element should render at a given time during the animation sequence. You can set up as many keyframes as you want (but you need at least two).
With these capabilities, you can create HTML5 animations to rival those created by advanced tools like Flash.
Animations also let you specify property values in each keyframe without having to declare them. The element smoothly changes behavior once the right keyframe is reached, even if the property wasn't listed at the start.
CSS Animation Properties
To create a transition, you can use the shorthand animation property, or a combination of the sub-properties below.
Only the animation-name and animation-duration properties are required. If the other properties aren’t specified, then they’ll be set to their default values.
- animation-name: specifies the type of animation, are required.
- animation-duration: specifies the length of time of the animation sequence.
- animation-timing-function: sets the pace of the animation.
- animation-delay: specifies when the animation starts. Can use milliseconds or seconds, and positive or negative values.
- animation-direction: defines the direction of the animation.
- animation-fill-mode: specifies whether the animation styles are applied before or after the animation plays.
- animation-iteration-count: specifies the number of times that the animation will play.
- animation-play-state: used to pause and resume the animation sequence.
Looping CSS Animations
Unlike a transition, which only plays through once after it’s been triggered, a CSS animation doesn’t require a triggering action and can be set to loop. You can make it repeat as many times as you want or set it to go on forever. You make this specification using the animation-iteration-count property, which lets you set its value in number of seconds or infinite.
There is a not-so-straightforward way to achieve a CSS transition loop by playing with the transitionEnd event. However, a CSS animation is easier if you prefer to add a loop.
CSS Animation Example
Below is an example of a CSS animation. There are multiple states that the graphic passes through and it loops. The steam shrinks in size, ascends upwards, and fades away. This image is much more dynamic than a CSS transition would be.
When to Use Animation vs Transition
Let's recap the ideal use cases for using animations over transitions:
- Creating more complex series of movements
- Having an effect take place as soon as the page loads
- Only using CSS (no JavaScript)
- Designing instruction overlays for a UI
Deciding Between Transitions & Animations
CSS transitions and animations have many similarities. However, it's clear that they also have significant differences that should guide how you use them on your website to improve your marketing efforts. Whichever you decide, adding transition or animation effects to your site can engage and delight your visitors, and keep them coming back.
Editor's note: This post was originally published in March 2020 and has been updated for comprehensiveness.
