Transitions

Introduction

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

Learning outcomes

• 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 transition of the color smoothly fading from white to black to occur.

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 simple 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

This section contains questions for you to check your understanding of this lesson. If you’re having trouble answering the questions below on your own, review the material above to find the answer.

• 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 other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

• 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.
  • This article discusses cubic-bezier functions in detail. While it has a ton of mathematics, you do not need to delve deep into it apart from a creating a basic idea about their 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.