280+ CSS3 Animations Pack – effect.css

Preview:

Description:

effect.css is a pure CSS library which provides 280+ CSS3 powered animation for your modern web project. Written in LESS and fully customizable. A great alternative to the animate.css.

Installation:

# NPM
$ npm install effectcss

# Bower
$ bower install effectcss

How to use it:

Include the compiled and minified version of the effect.css on the html page.

<link href="/dist/effectweb.min.css" rel="stylesheet">

Bounce animations:

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

Fade animations:

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

Fall animations:

.fall
.fall-left
.fall-right
.fall-left-right
.fall-right-left

Flip animations:

• .flip
• .flip-x
• .flip-y
• .flip-z
• .flip-swing-x
• .flip-swing-y
• .flip-swing-z
• .flip-x-inverse
• .flip-y-inverse
• .flip-z-inverse
• .flip-x-through
• .flip-y-through
• .flip-z-through
• .flip-slide
• .flip-slide-x
• .flip-slide-y
• .flip-slide-z
• .flip-slide-x-inverse
• .flip-slide-y-inverse
• .flip-slide-z-inverse
• .flip-slide-x-through
• .flip-slide-y-through
• .flip-slide-z-through

Hinge animations:

• .hinge
• .hinge-right
• .hinge-left-right
• .hinge-right-left

Rotate animations:

.rotate
.rotate-inverse
.newspaper
.newspaper-inverse
.rotate-top
.rotate-bottom
.rotate-top-bottom
.rotate-bottom-top
.rotate-left
.rotate-right
.rotate-left-right
.rotate-right-left
.rotate-down-left
.rotate-down-right
.rotate-up-left
.rotate-up-right
.fly-left
.fly-right
.fly-left-right
.fly-right-left

Sing animations:

• .sing
• .sing-bottom
• .sing-top-bottom
• .sing-bottom-top
• .sing-left
• .sing-right
• .sing-left-right
• .sing-right-left
• .sing-swing
• .sing-swing-bottom
• .sing-swing-left
• .sing-swing-right
• .sing-swing-left-right
• .sing-swing-right-left

Slide animations:

• .slide
• .slide-bottom
• .slide-top-bottom
• .slide-bottom-top
• .slide-left
• .slide-right
• .slide-left-right
• .slide-right-left
• .slide-sticky
• .slide-sticky-bottom
• .slide-sticky-left
• .slide-sticky-right
• .from-top
• .from-bottom
• .from-left
• .from-right
• .from-top-left
• .from-bottom-left
• .from-top-right
• .from-bottom-right
• .slide-west-east
• .slide-east-west
• .slide-north-south
• .slide-south-north

Speed animations:

• .speed-right
• .speed-left
• .speed-right-left
• .speed-left-right

Toss animations:

• .toss-top-left
• .toss-top-right
• .toss-bottom-left
• .toss-bottom-right

Wobble animations:

• .wobble
• .wobble-bottom
• .wobble-top
• .wobble-north
• .wobble-west
• .wobble-skew

Other animations:

• .flash
• .red-alert
• .pulse
• .pulse-large
• .roll
• .roll-right
• .scale
• .scale-large
• .shake
• .slit
• .slit-x
• .spin
• .stomp
• .swing
• .tada