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

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Transition duration, step 2

Smooth transitions and animations can only be applied to some CSS properties. Basically, these are properties that change the size, color, and position of elements. The article on MDN provides a list of animated properties and the nature of their animation.

If only the transition-duration is set, then the smooth transition will affect all properties of the element and will be applied simultaneously for all properties by default.

Let’s try setting a few more properties for the button and see how they change.

CSS transforms are used in this and the following examples, which are covered in detail in the “2D transforms” chapter.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Transition duration, step 2</title> <meta charset="utf-8"> <link rel="stylesheet" href="material.css"> <link rel="stylesheet" href="style.css"> </head> <body class="theory-theme"> <button class="btn" type="button">&#58883;</button> </body> </html>
CSS
.btn { background-color: #ffffff; transition-duration: 1s; } .btn-active { background-color: #ff5252; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Assign a text color of #ffffff and a transform: rotate(45deg) rotation for the active state of the .btn-active button,
    2. and then change the transition-duration for the .btn button to 200ms.

    Click the .btn button in the mini-browser to switch its btn-active class and see a smooth transition.

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2024

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.