Skip to content

vizarce/css-animation-playground

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 

Repository files navigation

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.


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

About

CSS-animation Playground for different Text Effects

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages