CSS-Animation-Playground

CSS-animation Playground for different Text Effects

🎬 CSS Animation Playground

Інтерактивний інструмент для створення, тестування та комбінування CSS-анімацій і текстових ефектів.

Створено з любов’ю до UI/UX, анімації та творчості. Цей playground дозволяє експериментувати з @keyframes, easing-кривими, glow, gradient, outline, 3D-ефектами — і все це в реальному часі.

✨ Можливості

• 🔠 Введення тексту для анімації
• 🎞️ Вибір з десятків анімацій: fade, slide, bounce, zoom, rotate, flip, pulse
• 🎨 Комбіновані текстові ефекти: glow, outline, gradient, 3D shadow
• 🧪 Live preview з easing-кривою (SVG)
• 🧬 Редактор @keyframes з кастомним CSS
• 💾 Експорт та імпорт стилів у JSON
• 📱 Адаптивний дизайн для мобільних і десктопів

🚀 Як використовувати

1. Введи текст
2. Обери анімацію, easing, тривалість
3. Активуй бажані текстові ефекти
4. Введи або встав @keyframes
5. Натисни “Застосувати анімацію”
6. Експортуй або імпортуй стилі через JSON

📦 Публікація

Цей playground розгорнутий на GitHub Pages.

---

“Анімація — це не просто рух. Це емоція, ритм і характер.”