Generate smooth CSS transition definitions with easing. CSS Transition Generator is a free online tool from the ToolsRift CSS Generators collection. It runs entirely in your browser — nothing to install, no signup, and your data never leaves your device.
Choose the property, duration, delay and easing, hover the preview to test the motion, and copy the transition CSS.
It smoothly animates changes to a CSS property over a duration, such as color, transform or opacity on hover.
Transitions run between two states triggered by a change; animations use @keyframes and can run on their own and loop.
ease-out feels responsive for UI, ease-in-out suits movement, and a custom cubic-bezier gives full control.