Урок 42. Решения: Анимации и переходы: transition и @keyframes

Один рабочий вариант на каждое задание. Превью показывают целевой результат: «до/после» для переходов и раскадровку фаз для анимаций.

1. Кнопка с переходом

transition объявлен на базовом селекторе — поэтому движение плавное и при наведении, и при уходе курсора. Превью кнопки реагирует на hover вживую.

.button {
  background: #0f766e;
  transition: transform 180ms ease, background-color 180ms ease;
}
.button:hover {
  background: #115e59;
  transform: translateY(-3px);
}

2. Сравнение кривых

Длительность одна, разница только в характере скорости.

.box { transition: transform .4s; }
.box.a { transition-timing-function: linear; }
.box.b { transition-timing-function: ease; }
.box.c { transition-timing-function: ease-in-out; }

3. Появление через @keyframes

@keyframes fade-up {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}
.feature-card { animation: fade-up 500ms ease-out both; }

4. Пульс по кадрам

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.25); }
}
.dot { animation: pulse 1s ease-in-out infinite; }

5. Доступность

Полная разметка карточки и медиазапрос, уважающий настройку «меньше движения».

<article class="feature-card">
  <h2>Плавные состояния</h2>
  <p>Карточка реагирует на наведение и фокус.</p>
  <a class="button" href="#">Открыть</a>
</article>

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms;
    animation-iteration-count: 1;
    transition-duration: .01ms;
  }
}