CSS Transitions & Timing Functions (`cubic-bezier`, Duration) - Free CSS3 Lessons | Nextsem

Unit 5: Transitions, Animations & Modern UILesson #25 / 30

Er. Manoj Kumar•Last Updated: 26 Aug, 2026

Smooth state changes (like button hovers and dropdowns) give web apps a responsive, premium feel.

transition-property: Properties to animate (e.g. background-color, transform). Avoid all for performance!

transition-duration: Time taken (e.g. 0.25s, 300ms).

transition-timing-function: ease, linear, ease-in-out, or custom cubic-bezier().

⊞Code Example

.card {

transform: translateY(0);

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);

transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease;

}

.card:hover {

transform: translateY(-6px);

box-shadow: 0 12px 24px rgba(4, 170, 109, 0.25);

}

Loading CSS3 curriculum...