Chapter 2: Smooth transitions

29 tasks beta

Let's learn how to smoothly change CSS properties. We will create beautiful and functional shape elements that are inspired by Material Design and create a mini-quiz about HTML and CSS.

The transition-duration property Task

Transition duration, step 2 Task

The transition-property: which properties can be changed smoothly? Task

The transition-delay property Task

The “form” of the transition, transition-timing-function Task

transition-timing-function, step 2 Task

transition-timing-function, step 3 Task

transition-timing-function, step 4 Task

Paper buttons, step 1 Task

Paper buttons, step 2 Task

Paper buttons, step 3 Task

Checkboxes, step 1 Task

Checkboxes, step 2 Task

Checkboxes, step 3 Task

Radio buttons, step 1 Task

Radio buttons, step 2 Task

Radio buttons, step 3 Task

Toggle switches, step 1 Task

Toggle switches, step 2 Task

Toggle switches, step 3 Task

Toggle switches, step 4 Task

The transformer icon, step 1 Task

The transformer icon, step 2 Task

The transformer icon, step 3 Task

The transformer icon, step 4 Task

Text input field, step 1 Task

Text input field, step 2 Task

Text input field, step 3 Task

Text input field, step 4 Task