Interview Question

What is transition timing function?

The timing function controls how quickly a transition progresses at each moment.

💡 Concept ✅ Quick Revision 🎨 CSS

Answer

A transition timing function controls the rate of progress during a transition. • Keywords include linear, ease, ease-in, ease-out, and ease-in-out. • cubic-bezier() defines a custom easing curve. • steps() creates a fixed number of discrete intervals.

💡 Simple Example

.panel { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }

⚡ Quick Revision

The timing function controls how quickly a transition progresses at each moment.