README.md (Updated with your GitHub repo)
AnimateX is a powerful, modern, and open-source CSS animation framework featuring 312+ high-quality animations, built for developers, designers, and UI creators.
It is designed to be:
- ⚡ Super fast
- 🎞️ Packed with animations
- 🎯 Easy to integrate
- 🧩 Fully customizable
- 🪶 Lightweight
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ProgrammerKR/AnimateX/dist/animatex.min.css" />
NPM (coming soon)
npm install animatex
---
🚀 Usage
Add two classes:
1. animatex – core class
2. Animation class (example: fadeInUp)
<h1 class="animatex fadeInUp">Hello AnimateX!</h1>
---
🧩 Features
🎬 312+ ready-made animations
🔁 Repeat, delay & custom duration utilities
📱 Fully responsive
⚙️ No JavaScript required
🧱 Modular CSS structure
🎨 Clean naming conventions
📦 Minified + unminified CSS
---
📂 Directory Structure
AnimateX/
│
├── dist/
│ ├── animatex.css
│ ├── animatex.min.css
│
├── src/
│ ├── core/
│ ├── animations/
│ ├── utilities/
│
├── docs/
│ ├── index.html
│ ├── examples/
│
├── package.json
├── README.md
└── LICENSE
---
📘 Documentation
Full documentation & animation previews coming soon.
---
✨ Example Animations
fadeIn, fadeInLeft, fadeInUp
slideUp, slideRight
zoomIn, zoomOut
bounce, pulse
rotateIn, rotateOut
flip3D, swirl, roll
Special FX (GlowPulse, MorphIn, StretchPop, etc.)
> Full list of 312 animations available soon inside /docs/animation-list.json.
---
🛠 Customization
CSS variables:
--animatex-duration: 1s;
--animatex-delay: 0s;
--animatex-iteration: 1;
Inline:
<div class="animatex fadeIn" style="--animatex-duration: 2s;"></div>
---
📄 License
Released under the MIT License — free for personal & commercial usage.
---
🤝 Contributing
Issues, feature requests, and pull requests are welcome.
👉 https://github.com/ProgrammerKR/AnimateX/issues
---
⭐ Support the Project
⭐ Star the repository on GitHub!
Your support encourages more updates, animations, and better documentation.
---
📬 Contact
GitHub Profile: https://github.com/ProgrammerKR