Beygs / animation.style

🔮 Free Open Source library of CSS animations! It has never been so easy to animate elements

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

and 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"/>

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. You can add multiple animation juste need to call it by their name.

Example :

Basic example:

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

Add multiple animation to the same element example:

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

Animation name

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

Founder

Guillaume Reygner
Animation.style Creator

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.