Chapter 2: Smooth transitions

29 tasks

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.

Start
1. The transition-duration property Task
2. Transition duration, step 2 Task
3. The transition-property: which properties can be changed smoothly? Task
4. The transition-delay property Task
5. The “form” of the transition, transition-timing-function Task
6. transition-timing-function, step 2 Task
7. transition-timing-function, step 3 Task
8. transition-timing-function, step 4 Task
9. Paper buttons, step 1 Task
10. Paper buttons, step 2 Task
11. Paper buttons, step 3 Task
12. Checkboxes, step 1 Task
13. Checkboxes, step 2 Task
14. Checkboxes, step 3 Task
15. Radio buttons, step 1 Task
16. Radio buttons, step 2 Task
17. Radio buttons, step 3 Task
18. Toggle switches, step 1 Task
19. Toggle switches, step 2 Task
20. Toggle switches, step 3 Task
21. Toggle switches, step 4 Task
22. The transformer icon, step 1 Task
23. The transformer icon, step 2 Task
24. The transformer icon, step 3 Task
25. The transformer icon, step 4 Task
26. Text input field, step 1 Task
27. Text input field, step 2 Task
28. Text input field, step 3 Task
29. Text input field, step 4 Task