Build CSS transitions with a visual cubic-bezier editor — adjust easing curves, duration and delay for any property. Preview the animation live and copy the transition CSS instantly.
A CSS transition animates a property change from one value to another over a specified duration. The shorthand transition: property duration easing delay can list multiple properties separated by commas. The easing function controls the rate of change — ease-in-out feels natural for most UI interactions, while cubic-bezier() gives full control over the acceleration curve. For performance, prefer transitioning transform and opacity — they run on the compositor thread and don't trigger layout or paint. Properties like width, height, and top cause reflow and are significantly more expensive.