CSS Pseudo Classes

Transitions

The CSS property transition can be used to control the animation speed of modified CSS property values.

In the pseudo-classes lesson lesson we used CSS to modify property values based on some external factors. When we, for example, hovered over an element the background color instantly changed to another color. With CSS transitions we can make the change take place over a period of time.

Not all CSS properties can be animated, and some may have unpredictable behavior if any of the start or end states have values set to auto. A full list of animatable CSS properties can be found on the MDN web docs site.

Notation

It is recommended to use the shorthand notation when dealing with CSS transitions as individual transition properties can be hard to debug.

The shorthand notation consists of four parts:

1. transition-property: the CSS property to which a transition should be applied
2. transition-duration: time the transition should take to reach the end state
3. transition-timing-fuction: the function responsible for calculating intermediate property values
4. transition-delay: time to wait before starting the transition animation

transition-duration is the only mandatory property that needs to be specified. transition-property defaults to all, transition-timing-function defaults to ease and transition-delay defaults to 0.

Code example: background-color

Copy
div {
  transition: background-color 0.5s;
  background-color: blue;
  font-size: 1rem;
  color: white;
  width: 32rem;
  height: 32rem;
}

div:hover {
  font-size: 2rem;
  background-color: red;
}

produces (try hovering over the blue square below)

ABC

Notice how the background color changes over 500ms, but the font size changes instantly. This is because we used the shorthand notation where we limited the transition property to background-color.

Code example: all

Copy
div {
  transition: all 0.5s;
  background-color: blue;
  font-size: 1rem;
  color: white;
  width: 32rem;
  height: 32rem;
}

div:hover {
  font-size: 2rem;
  background-color: red;
}

produces (try hovering over the blue square below)

ABC

The only change made from the previous example is the transition-property value which is now sat to all. Notice how the font size also animates.

Code example: timing function (ease)

Copy
div {
  transition: all 0.5s ease;
  background-color: blue;
  font-size: 1rem;
  color: white;
  width: 32rem;
  height: 32rem;
}

div:hover {
  font-size: 2rem;
  width: 64rem;
  background-color: red;
}

produces (try hovering over the blue square below)

ABC

Code example: timing function (custom)

Copy
div {
  transition: all 0.5s cubic-bezier(.29, 1.01, 1, -0.68);
  background-color: blue;
  font-size: 1rem;
  color: white;
  width: 32rem;
  height: 32rem;
}

div:hover {
  font-size: 2rem;
  width: 64rem;
  background-color: red;
}

produces (try hovering over the blue square below)

ABC

Copy
0 2em 0 2em

Copy
cubic-bezier(0.29, 0.5, 0.13, -0.68)

<div class="quote">
  <div class="inner">
    <div class="text">
      Only in silence the word, only in dark the light, only in dying life: bright the hawk's flight on the empty sky.
    </div>
    <footer>
      -- Sparrowhawk, <em>A Wizard of Earthsea</em>
    </footer>
  </div>
</div>

.inner {
  border-radius: 2em 0 2em 0;
  overflow: hidden;
}

.inner:hover {
}

.quote {
  color: #4fabdb;
  background-color: #f8f7f3;
  border: 0.25em solid #12272c;
  border-radius: 0.50em;
  padding: 2em 2.5em;
}

.quote footer {
  background-color: #12272cd0;
  padding: 1em;
  font-size: 0.75em;
}

.quote .text {
  background-color: #12272c;
  padding: 1em;
  display: inline-block;
}