CSS - Transitions

Implement CSS animation using transitions

Start

CSS Transitions

Lesson 1 of 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
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
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
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
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
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
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
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