Transitions and transforms
Transitions and transforms
Transitions animate property changes over time; transforms move, rotate or scale an element without changing normal flow. Animate only properties that make sense and respect prefers-reduced-motion. Avoid motion that distracts or blocks interaction.
Try it yourself
Change the example, run it, and explain the result in your own words. Then create one variation of your own.
Key idea
Use the example as a starting point, not something to memorize. Practise, inspect the result and make small improvements.
Code example
.button { transition: transform .18s ease, background-color .18s ease; }
.button:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition-duration: .01ms !important; } }