CSS Transitions
Lesson 1 of 1
  1. 1
    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….
  2. 2
    To create a simple transition in CSS, we must specify two of the four aspects: 1. The property that we want to transition. 2. The duration of the transition. a { transition-property: color; …
  3. 3
    The next transition property is transition-timing-function. The timing function describes the pace of the transition. The default value is ease, which starts the transition slowly, speeds up in th…
  4. 4
    Our last transition property is transition-delay. Much like duration, its value is an amount of time. Delay specifies the time to wait before starting the transition. As with the duration property,…
  5. 5
    Now that we’ve explored each transition property, you may find yourself with many CSS rule sets that look like the code below. transition-property: color; transition-duration: 1.5s; transition-tim…
  6. 6
    The shorthand transition rule has one advantage over the set of separate transition- rules: you can describe unique transitions for multiple properties, and combine them. To combine transitions, …
  7. 7
    Even with the shorthand, specifying transitions for many properties can be tedious. It is common to use the same duration, timing function, and delay for multiple properties. When this is the case …
  8. 8
    CSS Transitions are a powerful tool for providing visual feedback to users. We’ve learned a lot about transitions, so let’s review: CSS Transitions have 4 components: * A property that will t…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo