Анімації в CSS: як зробити сайт «живим» без JavaScript

CSS, Веб-розробка · 15-2-2025

Анімації роблять сайт динамічним для користувачів. Багато хто вважає, що для цього обов’язково потрібен JavaScript, але сучасний CSS дозволяє створювати складні ефекти без жодного рядка коду на JS. Використання CSS-анімацій пришвидшує завантаження сторінки та зменшує навантаження на браузер, оскільки вони апаратно прискорюються.

Основи CSS-анімацій

Щоб створити анімацію, потрібно визначити ключові кадри за допомогою @keyframes. Наприклад, зробимо плавне змінення кольору кнопки:

@keyframes changeColor {
  0% { background-color: #3498db; }
  100% { background-color: #2ecc71; }
}

button {
  animation: changeColor 2s infinite alternate;
}

Цей код змушує кнопку змінювати колір кожні 2 секунди. Анімація працює безперервно завдяки infinite, а alternate змушує її змінювати напрямок на кожному повторі.

Анімація руху об’єктів

Один із найпоширеніших ефектів — плавне переміщення елемента. Наприклад, зробимо блок, який рухається вліво-вправо:

@keyframes move {
  0% { transform: translateX(0); }
  50% { transform: translateX(100px); }
  100% { transform: translateX(0); }
}

.moving-block {
  animation: move 3s infinite;
}

Цей ефект можна застосувати до різних елементів, щоб надати сторінці динамічності.

CSS transition: плавні зміни стилів

Якщо потрібно анімувати зміну властивостей без @keyframes, можна використати transition. Наприклад, зробимо ефект наведеного курсора на кнопку:

button {
  background-color: #3498db;
  transition: background-color 0.3s ease-in-out;
}

button:hover {
  background-color: #2ecc71;
}

Цей підхід дозволяє зробити зміну кольору більш приємною без ривків.

Поєднання ефектів

Щоб отримати складніші ефекти, можна комбінувати @keyframes і transition. Наприклад, створимо ефект «пульсації»:

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

.pulsing-button {
  animation: pulse 1.5s infinite;
}

Таким чином, CSS-анімації дозволяють створювати динамічні та плавні ефекти без необхідності використання JavaScript.