280+ CSS3 Animations Pack – effect.css

Category: Animation , CSS & CSS3 | July 31, 2017
Author: quantumui
Views Total: 1,392 views
Official Page: Go to website
Last Update: July 31, 2017
License: MIT

Preview:

280+ CSS3 Animations Pack – effect.css

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

You Might Be Interested In:


Leave a Reply