CSS Animations

fade

The image fades in and out with an opacity change.

slide in

The image starts off the screen (on the left) and slides in to its normal position.

bounce

The image bounces up and down in a rhythmic pattern.

rotate

The image rotates continuously in a full circle.

pulse effect

The image smoothly grows and shrinks, giving it a pulsing effect.

colour change

The div smoothly changes colors over a period of time.

shake

The image shakes back and forth, commonly used to draw attention.

zoom

The image zooms in and becomes visible over the course of the animation.

typing

Hello I am Typing

This animation mimics the effect of text being typed out

flip

this animation flips the div on hovering

wave

This creates a smooth wave animation on an image

rotating cube

animated scenery