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

Properties to Animate

Duration (ms) 300

Timing Function

Delay (ms) 0

Hover Effects

Opacity 100%

Scale 100%

Rotate 0°

Translate X 0px

Translate Y 0px

Background Color

Border Radius

Top 8px

Bottom 8px

Related Tools

Sass to CSS Converter

Transform your Sass code into CSS. Fast, easy, and secure.

Less to CSS Converter

Transform your Less code into CSS. Fast, easy, and secure.

CSS Minifier

Compress and optimize your CSS code with professional precision

CSS Scrollbar Generator

Customize Your Website's Scrollbars with Ease

CSV to Base64 Converter

Transform your CSV data into Base64 encoding quickly and easily

Text to Binary

Convert text to binary code effortlessly