← Назад до курсу

▸ Як працює веб

▸ Перша веб-сторінка

▸ HTML-елементи та текст

▸ HTML-семантика

▸ HTML форми та медіа

▸ CSS основи та селектори

▸ Блокова модель CSS

▸ CSS позиціонування та Flexbox

▸ CSS типографіка та декор

▼ CSS-анімації та адаптивність

▸ Практика HTML/CSS: верстка проєкту

▸ JavaScript: змінні та типи даних

▸ JavaScript: методи рядків та Math

▸ JavaScript: масиви

▸ JavaScript: об'єкти та JSON

▸ JavaScript: керування потоком та функції

▸ JavaScript та DOM

▸ Node.js основи

▸ Express.js та REST API

▸ SQL та бази даних

▸ CSS Grid: двовимірна розкладка

▸ CSS Custom Properties та теми

▸ JavaScript: Класи та ООП

▸ JavaScript: Обробка помилок

▸ JavaScript: Fetch API та HTTP-запити

▸ JavaScript: Регулярні вирази

▸ npm, package.json та інструменти розробки

▸ Тестування JavaScript з Jest

← До курсу

CSS-анімації та адаптивність

CSS-анімації з @keyframes

📖 Теорія

CSS

1@keyframes fadeIn {
2  from { opacity: 0; transform: translateY(20px); }
3  to   { opacity: 1; transform: translateY(0); }
4}
5
6@keyframes pulse {
7  0%, 100% { transform: scale(1); }
8  50%       { transform: scale(1.05); }
9}

💡 Приклад коду

.card {
  animation: fadeIn 0.5s ease forwards;
}
.loader {
  animation: pulse 1.5s ease-in-out infinite;
}

Властивості animation:
.element {
  animation-name: fadeIn;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-delay: 0.2s;
  animation-iteration-count: infinite; /* або число */
  animation-direction: alternate;
  animation-fill-mode: forwards;   /* зберігає кінцевий стан */
  /* Скорочено: */
  animation: fadeIn 0.5s ease 0.2s 1 normal forwards;
}

← Попередній урок Наступний урок →