Author: | quantumui |
---|---|
Views Total: | 1,578 views |
Official Page: | Go to website |
Last Update: | July 31, 2017 |
License: | MIT |
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