Animations

Installation

To install all of the animations

$ component install esundahl/animations

Usage

All animations require a base class of .animated followed by the class of the animation that you want to invoke. For example in order to invoke the flash animation on an element you would do the following

<div class='animated flash'>Content to be animated</div>

Animation Collections

Attention Seekers

$ component install esundahl/attention-seekers

• .flash
• .bounce
• .shake
• .tada
• .swing
• .wobble
• .wiggle
• .pulse

Flippers

$ component install esundahl/flippers

• .flip
• .flip-in-x
• .flip-out-x
• .flip-in-y
• .flip-out-y

Fading Entrances

$ component install esundahl/fading-entrances

• .fade-in
• .fade-in-up
• .fade-in-down
• .fade-in-left
• .fade-in-right
• .fade-in-up-big
• .fade-in-down-big
• .fade-in-down
• .fade-in-left-big
• .fade-in-right-big

Fading Exits

$ component install esundahl/fading-exits

• .fade-out
• .fade-out-up
• .fade-out-down
• .fade-out-left
• .fade-out-right
• .fade-out-up-big
• .fade-out-down-big
• .fade-out-down
• .fade-out-left-big
• .fade-out-right-big

Bouncing Entrances

$ component install esundahl/bouncing-entrances

• .bounce-in
• .bounce-in-down
• .bounce-in-up
• .bounce-in-left
• .bounce-in-right

Bouncing Exits

$ component install esundahl/bouncing-exits

• .bounce-out
• .bounce-out-down
• .bounce-out-up
• .bounce-out-left
• .bounce-out-right

Rotating Entrances

$ component install esundahl/rotate-entrances

• .rotate-in
• .rotate-in-down-left
• .rotate-in-down-right
• .rotate-in-up-left
• .rotate-in-up-right

Rotating Exits

$ component install esundahl/rotate-entrances

• .rotate-out
• .rotate-out-down-left
• .rotate-out-down-right
• .rotate-out-up-left
• .rotate-out-up-right

$ component install esundahl/light-speed

Light Speed

• .light-speed-in
• .light-speed-out

Specials

$ component install esundahl/light-speed

• .hinge
• .roll-in
• .roll-out

Individual Animation Components

.bounce

$ component install esundahl/bounce

.flash

$ component install esundahl/flash

.pulse

$ component install esundahl/pulse

.shake

$ component install esundahl/shake

.swing

$ component install esundahl/swing

.tada

$ component install esundahl/tada

.wiggle

$ component install esundahl/wiggle

.wobble

$ component install esundahl/wobble

.bounce-in

$ component install esundahl/bounce-in

.bounce-in-down

$ component install esundahl/bounce-in-down

.bounce-in-left

$ component install esundahl/bounce-in-left

.bounce-in-right

$ component install esundahl/bounce-in-right

.bounce-in-up

$ component install esundahl/bounce-in-up

.bounce-out

$ component install esundahl/bounce-out

.bounce-out-down

$ component install esundahl/bounce-out-down

.bounce-out-left

$ component install esundahl/bounce-out-left

.bounce-out-right

$ component install esundahl/bounce-out-right

.bounce-out-up

$ component install esundahl/bounce-out-up

.fade-in

$ component install esundahl/fade-in

.fade-in-down

$ component install esundahl/fade-in-down

.fade-in-down-big

$ component install esundahl/fade-in-down-big

.fade-in-left

$ component install esundahl/fade-in-left

.fade-in-left-big

$ component install esundahl/fade-in-left-big

.fade-in-right

$ component install esundahl/fade-in-right

.fade-in-right-big

$ component install esundahl/fade-in-right-big

.fade-in-up

$ component install esundahl/fade-in-up

.fade-in-up-big

$ component install esundahl/fade-in-up-big

.fade-out

$ component install esundahl/fade-out

.fade-out-down

$ component install esundahl/fade-out-down

.fade-out-down-big

$ component install esundahl/fade-out-down-big

.fade-out-left

$ component install esundahl/fade-out-left

.fade-out-left-big

$ component install esundahl/fade-out-left-big

.fade-out-right

$ component install esundahl/fade-out-right

.fade-out-right-big

$ component install esundahl/fade-out-right-big

.fade-out-up

$ component install esundahl/fade-out-up

.fade-out-up-big

$ component install esundahl/fade-out-up-big

.flip

$ component install esundahl/flip

flip-in-x

$ component install esundahl/flip-in-x

.flip-in-y

$ component install esundahl/flip-in-y

.flip-out-x

$ component install esundahl/flip-out-x

.flip-out-y

$ component install esundahl/flip-out-y

.light-speed-in

$ component install esundahl/light-speed-in

.light-speed-out

$ component install esundahl/light-speed-out

.rotate-in

$ component install esundahl/rotate-in

.rotate-in-down-left

$ component install esundahl/rotate-in-down-left

.rotate-in-down-right

$ component install esundahl/rotate-in-down-right

.rotate-in-up-left

$ component install esundahl/rotate-in-up-left

.rotate-in-up-right

$ component install esundahl/rotate-in-up-right

.rotate-out

$ component install esundahl/rotate-out

.rotate-out-down-left

$ component install esundahl/rotate-out-down-left

.rotate-out-down-right

$ component install esundahl/rotate-out-down-right

.rotate-out-up-left

$ component install esundahl/rotate-out-up-left

.rotate-out-up-right

$ component install esundahl/rotate-out-up-right

.hinge

$ component install esundahl/hinge

.roll-in

$ component install esundahl/roll-in

.roll-out

$ component install esundahl/roll-out

License

MIT