Урок 14. Анимация: оживляем страницу

Сначала transform

Это свойство двигает, вращает и масштабирует элемент, не сдвигая соседей:

• transform: translateY(-10px); — поднять на 10 пикселей;
• transform: rotate(15deg); — повернуть на 15 градусов;
• transform: scale(1.2); — увеличить в 1,2 раза.

Вместе с :hover и transition это уже готовый эффект:

.karta:hover {
  transform: translateY(-8px) scale(1.03);
}

Настоящая анимация — @keyframes

Если движение должно идти само, без мышки, сначала описывают «кадры»:

@keyframes plavanie {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-18px); }
  100% { transform: translateY(0); }
}

Это как раскадровка мультфильма: в начале элемент на месте, в середине поднялся, в конце вернулся. А дальше анимацию включают элементу:

.shar {
  animation: plavanie 3s ease-in-out infinite;
}

• plavanie — имя, которое ты придумал в @keyframes;
• 3s — сколько длится один круг;
• ease-in-out — плавный старт и финиш;
• infinite — повторять бесконечно.

Частые вопросы