Simple CSS Transitions

No Transition

.boring-hover

Hover Me!

Hover the button to see animation.

.boring-active

Keep Me Pressed!

Click and hold the button to see animation.

.custom-boring

Make me change!

Change the style of .custom-boring in your CSS file.
Add a :hover pseudo class to make it change.

With Transition Property

.cool-hover

Hover Me!

Hover the button to see animation.

.cool-active

Keep Me Pressed!

Long click the button to see animation.

.custom-cool-hover

Hover Me!

Change the style of .custom-cool-hover in your CSS file.
Add a transition Property to make it change smoothly.

CSS Transforms

Non-Animated Transforms

rotate(30deg)

Simple rotated image by 30 degrees.

translate

Simple translate image in X & Y direction.

scale(0.5)

Image has been scaled to 0.5 its original size.

Try it yourself

Change the style of .custom-transform-basic in your CSS file.

Buggy Tranformations

rotate(30deg)

Hover over the image on the bottom right corner.

translateX(45px) translateY(-50px)

Hover over the image on the bottom left corner.

scale(0.5)

Hover over the image close to the edges.

Tranformations With Transitions

Smooth rotate(-30deg)

Hover over anywhere within the pink box.

translateX(100%)

Hello world

Hover over anywhere within the pink box.

scale(0.5)

Hover anywhere within the pink box.

skew skew

Hover anywhere within the pink box.