it
Середній
+35 XP

👋 Починай вчитися JavaScript прямо зараз — безкоштовно!

Увійти
📖

Переходи та анімації CSS

transition, transform, @keyframes — оживлюємо сторінку

transition — плавна зміна стилю

transition задається на елементі і спрацьовує при будь-якій зміні CSS властивості (зазвичай через :hover).

css
.btn {
  background: #6070f7;
  transform: scale(1);

  /* transition: властивість тривалість функція-часу затримка */
  transition: background 0.2s ease, transform 0.2s ease;

  /* Або для всіх властивостей */
  transition: all 0.2s ease;
}

.btn:hover {
  background: #4f5fea;
  transform: scale(1.05); /* трохи збільшуємо */
}

Функції часу:

  • ease — повільно → швидко → повільно (природно)
  • linear — рівномірно
  • ease-in — починає повільно
  • ease-out — закінчує повільно (для появи елементів)

transform — трансформація елемента

transform не рухає елемент у потоці документа — це чисто візуальна зміна. Браузер може анімувати його через GPU.

css
.element {
  /* Зміщення */
  transform: translateX(20px);     /* вправо */
  transform: translateY(-10px);    /* вгору */
  transform: translate(20px, -10px); /* обидва */

  /* Масштаб */
  transform: scale(1.1);           /* +10% */
  transform: scaleX(2);            /* ширина x2 */

  /* Обертання */
  transform: rotate(45deg);
  transform: rotate(-90deg);

  /* Нахил */
  transform: skewX(15deg);

  /* Комбінація */
  transform: translateY(-4px) scale(1.02);
}

@keyframes — повноцінна анімація

Для складніших анімацій що повторюються або мають кілька стадій:

css
/* Визначаємо анімацію */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes fadeIn {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Застосовуємо */
.spinner {
  animation: spin 1s linear infinite;
}

.card {
  animation: fadeIn 0.4s ease-out forwards;
  /* forwards — залишається в кінцевому стані */
}
css
💬

Саме цей код буде в Memory Game! perspective задає відстань спостерігача для 3D ефекту, backface-visibility: hidden ховає задню сторону коли повернута до нас.

Анімуй тільки transform і opacity — ці властивості браузер обробляє через GPU без перерахунку макету. Анімація width, height, top, left — повільна і смикається.

Коментарі

Увійти або Почати щоб залишити коментар.