CSS3 Transition Generator
Smooth opacity transition
Popular Presets
Fade Effect
Smooth opacity transition
Scale Effect
Resize element on hover
Rotate Effect
Rotate element on hover
Slide Effect
Move element position
Color Change
Background color transition
About Transitions
CSS transitions allow you to change property values smoothly, over a given duration.
Commonly animated properties include:
- width, height
- margin, padding
- opacity, color
- transform (scale, rotate, translate)
- background-color
Pro Tip: Use the 'All Properties' option to animate all changes.
Preview
Generated Code
.element { transition-property: all; transition-duration: 300ms; transition-timing-function: ease; transition-delay: 0ms; } .element:hover { /* Hover styles will be generated here */ }
Transition Controls
Hover Effects
Related Tools
Less to CSS Converter
Transform your Less code into CSS. Fast, easy, and secure.
Stylus to CSS Converter
Transform your SCSS code into CSS. Fast, easy, and secure.
CSS Minifier
Compress and optimize your CSS code with professional precision
Reactive Energy Converter
Convert reactive energy between different units with precision and ease
Base64 to CSV Converter
Convert Base64 encoded CSV data into downloadable CSV files instantly. Works locally in your browser with no data upload.
Base64 Encode Tool
Encode text to Base64 format with ease right in your browser.