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
HOVER ME
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
300
0
Hover Effects
100%
100%
0°
0px
0px
8px
8px
Related Tools
CSS3 Transition Generator
Smooth opacity transition
Stylus to CSS Converter
Transform your SCSS code into CSS. Fast, easy, and secure.
SCSS to CSS Converter
Transform your SCSS code into CSS. Fast, easy, and secure.
Hex to Decimal
Convert hexadecimal numbers to decimal effortlessly
Average Calculator
Quickly calculate the average (arithmetic mean) of a set of numbers with our easy-to-use tool.
Text to Decimal
Convert text to decimal representation effortlessly