Дизайн

Генератор CSS-анимаций

Выберите эффект и параметры — получите готовые @keyframes.

ЭффектДлительность: 1.5sПовтор

CSS

@keyframes demo {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-30px); }
}

.element {
  animation: demo 1.5s infinite ease-in-out;
}