Learn
CSS Transitions
CSS Transitions

After a website is displayed, the visual appearances of various elements can change for many reasons. For example:

  • Moving your mouse over a link may change the color or appearance of that link.
  • Changing the size of the window may change the layout.
  • Scrolling causes some elements to disappear and others to appear.

With CSS transitions, we can control how these changes happen.

These changes are a type of state change. CSS transitions allow us to control the timing of visual state changes. We can control the following four aspects of an element’s transition:

  • Which CSS properties transition
  • How long a transition lasts
  • How much time there is before a transition begins
  • How a transition accelerates

We’ll explore how different answers to each of these questions changes the animation. If any of these sound confusing, don’t worry! We will look at examples of each and learn how to use them together for a visually pleasing experience.

Instructions

1.

The web page in the browser contains a link styled as a button.

Currently, the background color abruptly changes from orange to green when you move your mouse over it. Let’s make this transition smoother.

In style.css, find the rule for <a> elements, and add a declaration to transition the background-color property over a duration of two seconds. It should look like this:

a { transition-property: background-color; transition-duration: 2s; }

Run the code, then hover over the links. What do you notice?

Folder Icon

Take this course for free

Already have an account?