Transitions
📌 Covered in this chapter:
Transition Definition · transition-property · duration · timing-function · delay · Shorthand · Hover · Focus · Limitations · Reduced Motion
Welcome to Chapter 34: Transitions — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1Transition Ante Enti?
Transition ante enti? Property value change smooth ga animate cheyadam — state A nundi state B ki gradual interpolation.
.button {
background: #2563eb;
transition: background-color 200ms ease,
transform 200ms ease;
}
.button:hover {
background: #1d4ed8;
transform: translateY(-2px);
}
.button:focus-visible {
outline: 3px solid #93c5fd;
transition: outline-offset 150ms ease;
}2Transition Properties & Limitations
transition-property— which properties animate (orall— avoid in production)transition-duration— 200ms, 0.3stransition-timing-function— ease, linear, ease-in-out, cubic-bezier()transition-delay— start delay- Shorthand:
transition: property duration timing delay;
Limitations: Transitions need trigger (hover, class change) — auto-starting loops ki animations use cheyandi. Only discrete steps ki transitions work avvavu.
CSS — Reduced Motion
@media (prefers-reduced-motion: reduce) {
.button { transition: none; }
}