Frequently Asked Questions
What is the CSS transition shorthand property?▼
The CSS transition shorthand combines four sub-properties: transition-property (which CSS property to animate), transition-duration (how long), transition-timing-function (the easing curve), and transition-delay (wait before starting). Example: transition: opacity 0.3s ease-in-out 0s. You can comma-separate multiple transitions to animate different properties independently.
What is cubic-bezier and how does it work in CSS transitions?▼
cubic-bezier() is a CSS timing function that defines a custom acceleration curve using four control points (x1, y1, x2, y2). The values range from 0 to 1 for x-coordinates and can exceed 0-1 for y-coordinates (creating overshoot/bounce effects). Named easings like ease, ease-in, and ease-out are shortcuts for specific cubic-bezier values.
Which CSS properties should I animate with transitions for best performance?▼
For optimal performance, prefer animating transform and opacity, which are GPU-accelerated and skip layout and paint steps. Properties like width, height, margin, and padding trigger expensive layout recalculations. Use will-change sparingly to hint at upcoming transitions.