Effects.css NPM

Effects.css

Effects.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Demonstration

Check out all the animations here!

Installation

Install via npm:

$ npm install effects.css --save

or yarn:

$ yarn add effects.css

Usage

To use Effects.css in your website, simply drop the stylesheet into your document's <head>, and add the class animated to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super!

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

or use a CDN hosted version by JSDeliv

<head>
  <link rel="stylesheet" href="https://www.jsdelivr.com/package/npm/effects.css" />
</head>

Animations

To animate an element, add the class animated to an element and one of the following classes to the element :

Class Name
`bounce`	`flash`	`pulse`	`rubberBand`
`shake`	`headShake`	`swing`	`tada`
`wobble`	`jello`	`bounceIn`	`bounceInDown`
`bounceInLeft`	`bounceInRight`	`bounceInUp`	`bounceOut`
`bounceOutDown`	`bounceOutLeft`	`bounceOutRight`	`bounceOutUp`
`fadeIn`	`fadeInDown`	`fadeInDownBig`	`fadeInLeft`
`fadeInLeftBig`	`fadeInRight`	`fadeInRightBig`	`fadeInUp`
`fadeInUpBig`	`fadeOut`	`fadeOutDown`	`fadeOutDownBig`
`fadeOutLeft`	`fadeOutLeftBig`	`fadeOutRight`	`fadeOutRightBig`
`fadeOutUp`	`fadeOutUpBig`	`flipInX`	`flipInY`
`flipOutX`	`flipOutY`	`lightSpeedIn`	`lightSpeedOut`
`rotateIn`	`rotateInDownLeft`	`rotateInDownRight`	`rotateInUpLeft`
`rotateInUpRight`	`rotateOut`	`rotateOutDownLeft`	`rotateOutDownRight`
`rotateOutUpLeft`	`rotateOutUpRight`	`hinge`	`jackInTheBox`
`rollIn`	`rollOut`	`zoomIn`	`zoomInDown`
`zoomInLeft`	`zoomInRight`	`zoomInUp`	`zoomOut`
`zoomOutDown`	`zoomOutLeft`	`zoomOutRight`	`zoomOutUp`
`slideInDown`	`slideInLeft`	`slideInRight`	`slideInUp`
`slideOutDown`	`slideOutLeft`	`slideOutRight`	`slideOutUp`
`heartBeat`	`boingInUp`	`boingOutDown`	`bombLeftOut`
`bombRightOut`	`foolishIn`	`foolishOut`	`holeOut`
`magic`	`washOut`	`openDownLeft`	`openDownLeftOut`
`openDownLeftReturn`	`openDownRight`	`openDownRightOut`	`openDownRightReturn`
`openUpLeft`	`openUpLeftOut`	`openUpLeftReturn`	`openUpRight`
`openUpRightOut`	`openUpRightReturn`	`perspectiveDown`	`perspectiveDownReturn`
`perspectiveLeft`	`perspectiveLeftReturn`	`perspectiveRight`	`perspectiveRightReturn`
`perspectiveUp`	`perspectiveUpReturn`	`puffIn`	`puffOut`
`rotateDown`	`rotateLeft`	`rotateRight`	`rotateUp`
`slideDown`	`slideDownReturn`	`slideLeft`	`slideLeftReturn`
`slideRight`	`slideRightReturn`	`slideUp`	`slideUpReturn`
`spaceInDown`	`spaceInLeft`	`spaceInRight`	`spaceInUp`
`spaceOutDown`	`spaceOutLeft`	`spaceOutRight`	`spaceOutUp`
`swap`	`swashIn`	`tinDownIn`	`tinDownOut`
`tinLeftIn`	`tinLeftOut`	`tinRightIn`	`tinRightOut`
`tinUpIn`	`tinUpOut`	`twisterInDown`	`twisterInUp`
`vanishIn`	`vanishOut`

<h1 class="animated bounce">Example</h1>

You can include the class infinite for an infinite loop.

<h1 class="animated infinite bounce">Example</h1>

It's possible to add delays directly on the element's class attribute by including one of the following classes.

Class Name	Delay Time
`delay-2s`	`2s`
`delay-3s`	`3s`
`delay-4s`	`4s`
`delay-5s`	`5s`

<h1 class="animated infinite bounce delay-2s">Example</h1>

It's possible to change the duration of your animations, add a delay or change the number of times that it plays:

.yourElement {
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

Note: The default delays are from 1 second to 5 seconds only. If you need custom delays, add it directly to your own CSS code.

It's possible to control the speed of the animation by adding these classes, as a sample below:

Class Name	Speed Time
`slow`	`2s`
`slower`	`3s`
`fast`	`800ms`
`faster`	`500ms`

Note: The animated class has a default speed of 1s. If you need custom duration, add it directly to your own CSS code.

<div class="animated bounce faster">Example</div>

Usage

All effects are in dist/effects.min.css file, you can easily use with

 <link href="effects.css/dist/effects.min.css" rel="stylesheet" type="text/css" />

but if you want only few effects, you can use the file which is called as the effect name.

Example

<link href="effects.css/dist/effects-core.min.css" rel="stylesheet" type="text/css" />
 <link href="effects.css/dist/bounceIn.min.css" rel="stylesheet" type="text/css" />

  <div id="div1">DIV 1</div>

  <script>
    var div1 = document.querySelector("#div1");
    div1.classList.add("animated");
    div.classList.add("zoomIn");
  </script>

License

Effects.css is based on Animate.css v3.7.2 by Daniel Eden and 96 contributors and on magic v1.4.5 by miniMAC and 9 contributors.

Contributing

Pull requests are the way to go here. We only have two rules for submitting a pull request:

css animation effects

@infinitebrahmanuniverse/nolb-ef @everything-registry/sub-chunk-1556

3.7.1

4 years ago

3.7.0

4 years ago