HTML and CSS Basics, part 21: CSS animations and transitions

In this article we’ll learn about basics of CSS transitions and animations.

This article is only a small part of the HTML and CSS basics article series.

Also note that this article is actually an excerpt from my book: Vue.js Quick Start Guide.

Let’s start by examining CSS transitions.

How CSS transitions work

When we hover over an element, we put that element in a hover state. When the user triggers a hover state through their interaction with our web page, we might want to emphasize that this change of state has occurred.

Photo by Pankaj Patel, @pankajpatel on Unsplash

To emphasize that change of state, we could, for example, change the CSS background-color property on that element when the user hovers over it.

This is where CSS transitions come in. When we write code for CSS transitions, we instruct the browser on how it will display changes made to that specific CSS property—in our example, the background-color property.

This is where CSS transitions come in. When we write code for CSS transitions, we instruct the browser on how it will display changes made to that specific CSS property—in our example, the background-color property.

Let’s say we have an HTML button element. This element has its CSS property of background-color set to red:

button {
  background-color: red;
}

When a user hovers over the button, we want to change the value of the background-color property from red to blue. We’ll do that like this:

button:hover {
  background-color: blue;
}

The sample code is available here.

However, this change of color is sudden. To smoothly transition a CSS property of an HTML element from one value to the other, we use the CSS transition property. The transition property is a shorthand CSS property. It is just another CSS property we specify on the targeted element—the one to which we want to apply this smooth transition.

In our case, we want to smoothly transition our button from the red background to the blue background. We will simply add the shorthand transition property on the button element, and set two values on this transition property:

button {
 background-color: red;
 transition: background-color 4s;
}
button:hover {
 background-color: blue;
}

This is the formula:

transition: property-to-transition transition-duration, property-to-transition transition-duration

In our example, we’re specifying the duration for only one property, but we can add more, as needed. The previous example can be found in another codepen.

How CSS animations work

In the previous example, we saw a simple transition. In this example, we will convert the transition into an animation. The updated CSS code will look like this:

button {
  background-color: red;
}
button:hover {
  animation: change-color 4s;
}
@keyframes change-color {
  0% {
    background: red;
  }
  100% {
    background: blue;
  }
}

In the previous code, we have converted our simple CSS transition into a CSS animation.

This example can be found at this link.

However, it does not work 100% the same. When we hover over the button, we don’t get the exact same behavior we had in the transition example. The reason is that we have specified the initial state (as 0%) and the final state (as 100%) of our animation. So, we are effectively mapping over the behavior we had in the transition example, to behavior in the animation example.

However, when we remove the mouse pointer from the button, the animation does not rewind to the initial state, but rather abruptly cuts back to the original background color of red. In CSS, there is no mouseout property.

To find out more about this issue, head on over to this discussion on Stackoverflow.

We could, however, add additional steps in between. For example, we could set the background color to green at 50% of our change animation. The result can be seen at this URL.

Next, let’s look at the differences between them in CSS.

Differences between transitions and animations in CSS

Here are two lists of the most important differences between transitions and animations in CSS.

Rules for CSS transitions

Here are some important rules of CSS transitions:

• Transitions only have implied start and end states
• The way that a transition will be performed is decided by the browser; in other words, the browser decides how it will perform the in-between steps of the transition
• We can only point the browser to the exact CSS property we want transitioned, and the duration, easing, and so on
• Transitions are triggered; the trigger can be a hover or an element appearing on the page (via JavaScript)
• Transitions can’t be looped
• Transitions are played in reverse when the trigger state (the hover state) is reverted, that is, when the mouse is unhovered
• Transition syntax is simpler than the syntax for animations

Next, let’s list the important concepts of CSS animations.

Rules for CSS animations

What follows is an incomplete list of rules for CSS animations:

• Animations allow us to specify initial state, in-between state(s), and end state of our CSS properties
• There can be as many steps as we need in our CSS animations
• We can delay animations, play them x number of times (to infinity), or play them in the opposite direction
• Animations don’t have to be triggered, but they can be

That’s it for this basic introduction to CSS transitions and animations.