AnimGen - CSS Animation Generator
📖 About
AnimGen is a lightweight, single-file web application designed for developers who want to create smooth, aesthetic CSS animations without writing complex @Keyframes manually. The interface provides real-time previews, customizable controls, and instant production-ready code generation.
✨ Features
🎨 Live Preview — Instantly visualize animations.
⚡ Instant Code Generation — Clean, indented CSS for @Keyframes and utility classes.
🎛️ Custom Controls
Adjustable Duration (0.1s – 5.0s)
Easing Functions (Linear, Ease-in-out, Bounce, etc.)
🌓 Dark / Light Mode with local storage persistence.
📱 Responsive UI built using Tailwind CSS.
📋 One-Click Copy to clipboard.
🔍 SEO-Optimized with Open Graph, Twitter Cards & JSON-LD schema.
🛠️ Tech Stack
Core: HTML5, Vanilla JavaScript (ES6+)
Styling: Tailwind CSS (CDN) + Custom CSS
Icons: Google Material Icons
Fonts: Google Fonts (Outfit & Fira Code)
🚀 Getting Started
AnimGen is a static, single-file application. No builds or dependencies needed.
Clone the repository
git clone https://github.com/KDippan/AnimGen.git
Navigate to the directory
cd AnimGen
Open the file
Simply open index.html (or animation_generator.html) in your browser.
No Node.js, no bundlers — just open and use.
🤝 Contributing
Contributions are welcome and appreciated!
-
Fork the repository
-
Create your feature branch
git checkout -b feature/AmazingFeature
- Commit your changes
git commit -m "Add some AmazingFeature"
- Push to the branch
git push origin feature/AmazingFeature
- Open a pull request
☕ Support the Project
If AnimGen saved you time or you love its design, consider buying me a coffee!
---
👤 Author
Dippan Bhusal
🌐 Website: DippanBhusal.tech
🐙 GitHub: @kdippan
📸 Instagram: @dippan.bhusal
📧 Email: Dippan.connect@gmail.com
📄 License
Distributed under the MIT License. See the LICENSE file for details.