CSS Transitions
Lesson 1 of 1
  1. 1
    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….
    Start
  2. 2
    Duration
    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; …
    Start
  3. 3
    Timing Function
    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…
    Start
  4. 4
    Delay
    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,…
    Start
  5. 5
    Shorthand
    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…
    Start
  6. 6
    Combinations
    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, …
    Start
  7. 7
    All
    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 …
    Start
  8. 8
    Review
    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…
    Start

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