https://github.com/guillaume-rygn/animation.style
🔮 Free Open Source library of CSS animations! It has never been so easy to animate elements
https://github.com/guillaume-rygn/animation.style
animation css css-animation
Last synced: about 1 year ago
JSON representation
🔮 Free Open Source library of CSS animations! It has never been so easy to animate elements
- Host: GitHub
- URL: https://github.com/guillaume-rygn/animation.style
- Owner: guillaume-rygn
- License: other
- Created: 2022-04-26T13:39:59.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-02-22T10:44:12.000Z (over 2 years ago)
- Last Synced: 2025-04-06T22:18:36.249Z (about 1 year ago)
- Topics: animation, css, css-animation
- Language: CSS
- Homepage:
- Size: 849 KB
- Stars: 11
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Animation.style
[](https://github.com/guillaume-rygn/animation-style/releases) [](LICENSE.md)
## ***It has never been so easy to animate elements !***
## Installation
Install with npm:
```shell
npm install animation.style --save
```
or install with yarn:
```shell
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:
```
```
Add JS script:
with yarn or npm :
```
```
with CDN :
```
```
## 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 :
```
I'm a animated element
```
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.
```
I'm a animated element
```
## Example :
Basic example:
```
I'm a animated element
Same example with intersection observer:
```
I'm a animated element
```
## Animation name
- **[fadeIn](source/fade/fadeIn.css)**
- **[fadeOut](source/fade/fadeOut.css)**
- **[leftIn](source/translate/leftIn.css)**
- **[leftOut](source/translate/leftOut.css)**
- **[rightIn](source/translate/rightIn.css)**
- **[rightOut](source/translate/rightOut.css)**
- **[topIn](source/translate/topIn.css)**
- **[topOut](source/translate/topOut.css)**
- **[bottomIn](source/translate/bottomIn.css)**
- **[bottomOut](source/translate/bottomOut.css)**
## Founder
| [Guillaume Reygner](https://github.com/guillaume-rygn) |
| ----------- |
| Animation.style Creator |
## License
Animation.style is licensed under the [Hippocratic License](LICENSE.md).
## Code of conduct
This project and everyone participating in it is governed by the Animation.style [Code of Conduct](CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code.
## Contributing
Everyone can be contributing. Please refer to the [contribution](CONTRIBUTING.md) file procedure to contribute.