Animation.style

It has never been so easy to animate elements !

Installation

Install with npm:

npm install animation.style --save

or install with yarn:

yarn add animation.style

Initialize: In your CSS file add:

@import 'node_modules/animation.style/animation.css'

Or install with CDN in HEAD of your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animation.style@latest/animation.min.css"/>

Add JS script:

with yarn or npm :

<script src='node_modules/animation.style/animation.js'></script>

with CDN :

<script src='https://cdn.jsdelivr.net/npm/animation.style@latest/animation.js'></script>

How to use it

After add Animation.style in head of your html files. You can add the class animation along with any animation name like :

<p class="animation fadeOut">I'm a animated element</p>

You can set up the duration with class duration-[i] with i between 1 to 10. Same for the delay, you can add a delay for animation with class delay-[i] with i between 1 to 10.

Intersection Observer

With the latest version of animation.style you can directly integrate the observer intersection to your animations ! For add an animation you just need to call it in animation attribute (don't forget the class animation) and add the class intersection to the element.

<p class="animation intersection" animation="fadeOut">I'm a animated element</p>

Example :

Basic example:

<p class="animation fadeIn duration-3 delay-5">I'm a animated element</p>

Same example with intersection observer:

I'm a animated element

Animation name

• fadeIn
• fadeOut
• leftIn
• leftOut
• rightIn
• rightOut
• topIn
• topOut
• bottomIn
• bottomOut

Founder

License

Animation.style is licensed under the Hippocratic License.

Code of conduct

This project and everyone participating in it is governed by the Animation.style Code of Conduct. By participating, you are expected to uphold this code.

Contributing

Everyone can be contributing. Please refer to the contribution file procedure to contribute.