Design values, direction and motion · Lesson 15 of 17
CSS transitions and transforms
Animate state changes while respecting reduced motion.
8 minutes1 games
A transition interpolates between values when state changes. Specify the property, duration and easing. transform visually moves or scales an element without rearranging its neighbors. Use small purposeful motion and respect prefers-reduced-motion.
HTML
<style>
button {padding:12px 20px;transition:transform 150ms ease-out;background:teal;color:white;border:0;}
button:hover {transform:translateY(-2px);}
button:focus-visible {outline:3px solid navy;outline-offset:3px;}
@media (prefers-reduced-motion: reduce) {button {transition:none;} button:hover {transform:none;}}
</style>
<button>Hover or focus me</button>.tile { transform: none; }Try transforms; the element’s flow space stays unchanged.
Exercise
Move .box visually 10px right using transform.
HTML
<style></style><div class="box">Box</div>
Learn more from
Played 0 of 1 games
Sign in to save your progress and earn XP.