Примеры — Урок 42

Переход и анимацию видно только в движении. Чтобы показать результат на странице, рядом с кодом мы ставим «до» и «после» (для transition) или раскадровку кадров (для @keyframes). Наведите курсор на превью кнопки — там переход живой.

1. transition: состояния «до» и «после»

Переход не задаёт новых значений — он сглаживает путь к тем, что описаны в :hover. Слева обычная кнопка, справа — её состояние при наведении. Само превью первой кнопки тоже реагирует на hover.

Кнопка

обычная (0%)

→

Кнопка

:hover (100%)

.button {
  background: #0f766e;
  /* переход — на базовом селекторе, работает в обе стороны */
  transition: transform 180ms ease, background-color 180ms ease;
}

.button:hover {
  background: #115e59;
  transform: translateY(-3px);   /* цель, к которой плавно идёт transition */
}

2. transition-timing-function: разные кривые

Одна и та же длительность, но скорость распределяется по-разному. Сравните формы кривых.

Чем круче участок — тем быстрее идёт изменение в этот момент.

.a { transition: transform .4s linear; }
.b { transition: transform .4s ease; }          /* старт быстро, к концу замедление */
.c { transition: transform .4s ease-in-out; }   /* плавный старт и торможение */
.d { transition: transform .4s cubic-bezier(.34,1.56,.64,1); } /* с «отскоком» */

3. @keyframes fade-up: раскадровка появления

Анимация без своего CSS-класса в превью не запустится, поэтому показываем её фазы статично. Браузер проигрывает их за 500ms.

Карточка

50%

Карточка

100%

@keyframes fade-up {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.feature-card {
  animation: fade-up 500ms ease-out both;  /* имя duration easing fill-mode */
}

4. @keyframes pulse: процентные кадры и повтор

Кадры можно задавать процентами. Пульс масштабируется в середине и возвращается, повторяясь бесконечно.

50%

100%

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}

.dot {
  animation: pulse 1s ease-in-out infinite;  /* infinite = бесконечный цикл */
}

5. HTML под примеры + доступность

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

Плавные состояния

Карточка реагирует на наведение и фокус, но уважает prefers-reduced-motion.

Открыть

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

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

Проверьте в DevTools: на вкладке Animations можно замедлить проигрывание, а в Rendering включить эмуляцию prefers-reduced-motion.

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