Home / Patterns / Animations

Animations

Many of these can be a different kind of animation (e.g. they are listed as a hover but can also be an entrance or scroll-to-animate), so if you want a different version, just ask!

A lot of these animations were taken from this website, if you see one on there that isn't yet in here, let me know and I can add it!

Hovers

Color Slides Down on Hover:

The background color slides down from the top.

Color Slides from the left on Hover:

The background color slides in from the left.

Color Spreads out from the center on Hover:

The background color spreads out from the center.

The button shrinks slightly on hover:

I shrink slightly on hover.

The button 'tadas' on hover:

I "tada" on hover.

Entrance/On Load

These animations require a javascript function that adds a class to the body once the page is loaded:
$(function() { $('body').addClass('loaded'); });