Animations

This page contains examples of animations made with pure CSS that we can use on different scenarios on a website. These animations examples are 1 second long, but they can last as long as we want. They also can be triggered once or loop for an undefined amount of time until something stops them.

For a complete reference of animations go to https://daneden.github.io/animate.css/.

This page also has a custom animations section which are made by us and we can customize them at any point.

Heading 1

This heading has a specific animation for H1, the paragraph will have a different animation.

This is a blockquote with an animation

Heading 2

Bullet points
Can have
Animations
Too

Heading 3

Doesn’t
Matter what
Type of
Bullets are

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading 5

Heading 6

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Animations

Animate CSS

Select your animation:

Bounce

Shake

Heart Beat

Jello

Fade In Left

Hinge

Complex examples with components and JS!

Masthead 02 animated

Masthead Title

Masthead description or sub title