What are CSS Transitions

Code Playground is only enabled on larger screen sizes.

Recall that the pseudo-selectors allow you to define properties that only activate when the element is under a particular state.

For example, in the following example, when the cursor is hovered over the <div>, its width will be doubled, and its color will change.

css

div {
  padding: 10px;
  margin: auto;
  border: 2px solid darkviolet;
  border-radius: 10px;
  font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
    "Lucida Sans", Arial, sans-serif;
 
  color: darkviolet;
  width: 200px;
}
 
div:hover {
  color: white;
  background-color: darkviolet;
  width: 400px;
}

But notice that the change happens instantly.

What if you want to customize the transition so that the changes smoother? You will need to use the transition properties:

css

div {
  padding: 10px;
  margin: auto;
  border: 2px solid darkviolet;
  border-radius: 10px;
  font-family: /* . . . */;
 
  color: darkviolet;
  width: 200px;
 
  transition-property: width;
  transition-duration: 1s;
}
 
div:hover {
  color: white;
  background-color: darkviolet;
  width: 400px;
}

The transition-property specifies the CSS property that this transition is created for.

And the transition-duration determines how long the transition lasts.

For our example above, it will take 1s for the width of <div> to change from 200px to 400px.

You can add more multiple transition properties like this:

css

div {
  /* . . . */
 
  transition-property: width, color, background-color;
  transition-duration: 1s;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="/styles.css">
</head>

<body>
  <div>Hello, World!</div>
</body>

</html>

Open Sandbox

Loading course content...