Introduction

It’s time to dive into the exciting world of CSS transitions and give your HTML elements some slick transformations!

Lesson overview

This section contains a general overview of topics that you will learn in this lesson.

• What a CSS transition is and when to use it.
• Know what CSS properties are animatable and which ones are not.
• How to make sure your transitions are smooth and performant.

Transitions

CSS transitions let you animate a change from an element’s initial state to an end state. Think of an ordinary button element with a white background. When your mouse is away from the button, it’s just sitting there. Boring. Then when you hover your mouse cursor over the button the background color smoothly transitions from white to grey to black over a period of time. This is a CSS transition. Have a look at the Codepen below to see one in action.

See the Pen CSS Transition (longhand) by TheOdinProject (@TheOdinProjectExamples) on CodePen.

When your mouse cursor is away from the button, the button is in the initial state. When you hover over it, you introduce the end state - the hover state - causing the background color to transition smoothly from white to black.

This was achieved using the transition property, which is actually a shorthand property for transition-property, transition-duration, transition-timing-function and transition-delay.

button {
  /* ... other CSS properties ... */
  transition-property: background-color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  transition-delay: 0.25s;
}

• transition-property - This determines what CSS property will be transitioned. In this case it is the background-color.
• transition-duration - This determines the duration that the transition will occur over. In this case the color change will gradually happen over 1 second.
• transition-timing-function - This lets us change the speed of the transition over the course of its duration. Here it will ease-out, meaning the color change will be faster at the start than at the end of the transition.
• transition-delay - This determines the delay at which the transition will start. In this case, the color change starts a quarter of a second after the cursor rests on the button.

The shorthand property looks like this:

button {
  /* ... other CSS properties ... */
  background-color: white;
  transition: background-color 1s ease-out 0.25s;
}

button:hover {
  background-color: black;
}

The above transition will occur when the user hovers their mouse over the button as indicated by the :hover pseudo-class. In addition to :hover, or any of the other pseudo-classes, you can also trigger transitions by adding or removing classes with JavaScript. For example, clicking a button could append the “open” class to a dropdown menu, which would trigger the opening transition.

Performance

Generally, keeping your CSS transitions performant will not be an issue. However there are a couple of things you need to keep in mind.

The first is the “stacking context”. Basically, a stacking context is formed when certain element scenarios are in place. A relevant scenario for us would be to transition a transform property like below:

div {
  width: 100px;
  height: 100px;
  transition: transform 2s 1s;
}

div:hover {
  transform: rotate(180deg);
}

This has created a stacking context. If we were to make a bunch more stacking contexts through various other means then, when it comes to rendering our initial transform, we would repaint not only our div element but also every element that is stacked on top of it in the stack context. If left unchecked, this can cause your once buttery-smooth transition to become slow and rough.

The second thing to keep in mind is that you should keep your animations to only affecting opacity and transform if you want absolute best performance for animations on your web page. Yes, our first example above only carried out a background-color change, but even that was an expensive operation in itself.

What’s important is that you have a solid understanding of these concepts and can apply them when necessary because hey, if you need to turn a button into a rainbow when it’s hovered over, you better be able to transition that rainbow!

Assignment

Knowledge check

The following questions are an opportunity to reflect on key topics in this lesson. If you can’t answer a question, click on it to review the material, but keep in mind you are not expected to memorize or master this knowledge.

• Are all CSS properties animatable?
• What are the long and short-hand notations for transitions?
• What is the stacking context?
• Why do you need to keep an eye on repaints?

Additional resources

This section contains helpful links to related content. It isn’t required, so consider it supplemental.

• For a deeper dive, check out this MDN article on the stacking context.
• Up until now, you have only controlled the speed of your transitions with the help of keyword values like ease and ease-in. However, CSS allows you to define your own timing functions with the help of timing functions like steps and cubic-bezier. In specific, the cubic-bezier function is widely used.
• While the cubic-bezier function has a ton of mathematics, you do not need to delve deep into it apart from a creating a basic idea about its purpose.
• You can play around with the CSS Cubic Bezier Generator to not only view how the cubic-bezier value works in an editable demo, but also to compare the different transition-timing-function values side by side.