Анімації

Мікро-рух на keyframes

Тільки transform/opacity з відточеним easing і тривалістю.

Чекліст

Чекліст анімацій

Плавний і зрозумілий рух

  • Анімуйте лише transform/opacity; не рухайте розміри/тіні.
  • Лоадери тримайте до ~1.4с, цикли — 6–12с.
  • Списки розносьте на 60–120 мс для глибини.

Демо

Мікро float

Зсув по Y + прозорість

@keyframes float {
  0%,100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-12px); opacity: 0.85; }
}

Патерни

Де застосувати

Бейджі, лоадери, marquee

Pill бейдж

Ковзна крапка для активного стану

.pill::after { animation: slide 2.4s ease-in-out infinite; }

Marquee

Безкінечний translateX

.marquee { animation: ticker 14s linear infinite; }