Question 1

What is a CSS transition?

Accepted Answer

A CSS transition smoothly animates a property change between two values over a duration. The shorthand is: transition: property duration timing-function delay;. For example transition: transform 0.3s ease fades a transform change over 300 milliseconds.

Question 2

What is the difference between transition and animation?

Accepted Answer

Transitions animate between two states triggered by a change like :hover or a class toggle. They run once. Animations use @keyframes to define multiple steps and can loop, reverse and start automatically without a trigger. Use transitions for simple state changes and animations for complex multi-step motion.

Question 3

Which CSS properties can be transitioned?

Accepted Answer

Only properties with discrete or numeric values can be transitioned: color, background, opacity, transform, width, height, margin, padding and more. Use the all keyword to transition every animatable property, though this can hurt performance. For best performance animate transform and opacity only.

Question 4

What is a cubic-bezier easing function?

Accepted Answer

cubic-bezier(x1, y1, x2, y2) defines a custom acceleration curve with two control points. Common values include ease (0.25,0.1,0.25,1), ease-in (0.42,0,1,1) and ease-out (0,0,0.58,1). Custom beziers like cubic-bezier(0.68,-0.55,0.27,1.55) create bouncy or overshooting effects.

🎛️

👁 —

📋