Перейти к содержимому
Яша.dev — Учим код

8. Анимации и переходы

CSS: Анимации и переходы

Заголовок раздела «CSS: Анимации и переходы»

Иллюстрация к уроку В этом уроке мы погрузимся в захватывающий мир CSS анимаций и переходов, которые позволяют оживить ваши веб-страницы и сделать их более интерактивными. Мы научимся создавать плавные изменения и полноценные анимации, используя лишь CSS.

Переходы (Transitions)

Заголовок раздела «Переходы (Transitions)»

Переходы позволяют плавно изменять значения CSS-свойств при возникновении определенного события, например, при наведении курсора мыши.

Синтаксис

Заголовок раздела «Синтаксис»
transition: property duration timing-function delay;
  • property: CSS-свойство, к которому применяется переход (например, background-color, width, opacity).
  • duration: Продолжительность перехода в секундах (s) или миллисекундах (ms).
  • timing-function: Функция времени, определяющая скорость изменения свойства (например, ease, linear, ease-in, ease-out, ease-in-out).
  • delay: Задержка перед началом перехода в секундах (s) или миллисекундах (ms).

Пример

Заголовок раздела «Пример»
<!DOCTYPE html>
<html>
<head>
<title>CSS Transitions</title>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 0.5s ease, width 1s linear; /* Применяем переходы к background-color и width */
}


.box:hover {
  background-color: blue;
  width: 200px;
}
</style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

При наведении курсора на элемент .box, его цвет плавно изменится с красного на синий за 0.5 секунды, а ширина плавно увеличится до 200px за 1 секунду.

Анимации (Animations)

Заголовок раздела «Анимации (Animations)»

Анимации позволяют создавать более сложные и контролируемые изменения, чем переходы. Они основаны на ключевых кадрах (@keyframes).

Синтаксис

Заголовок раздела «Синтаксис»
@keyframes animation-name {
  0% { /* Начальное состояние */
    property: value;
  }
  50% { /* Промежуточное состояние */
    property: value;
  }
  100% { /* Конечное состояние */
    property: value;
  }
}


.element {
  animation-name: animation-name;
  animation-duration: duration;
  animation-timing-function: timing-function;
  animation-delay: delay;
  animation-iteration-count: iteration-count;
  animation-direction: direction;
  animation-fill-mode: fill-mode;
}
  • animation-name: Имя анимации, определенное в блоке @keyframes.
  • animation-duration: Продолжительность анимации.
  • animation-timing-function: Функция времени.
  • animation-delay: Задержка перед началом анимации.
  • animation-iteration-count: Количество повторений анимации (infinite - бесконечно).
  • animation-direction: Направление анимации (normal, reverse, alternate, alternate-reverse).
  • animation-fill-mode: Определяет, как стили применяются к элементу до и после анимации (forwards, backwards, both, none).

Пример

Заголовок раздела «Пример»
<!DOCTYPE html>
<html>
<head>
<title>CSS Animations</title>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  animation-name: move;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}


@keyframes move {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

Этот пример создает анимацию, которая перемещает квадрат по экрану и меняет его цвет.

Жизненный пример

Заголовок раздела «Жизненный пример»
  • Сайты электронной коммерции: Эффекты при наведении на товары, отображение уведомлений, анимация загрузки.
  • Веб-приложения: Анимация переходов между страницами, индикаторы прогресса, плавные изменения интерфейса.
  • Фреймворки (например, Bootstrap, Materialize): Содержат множество готовых классов для создания анимаций и переходов, таких как всплывающие окна, слайдеры, и другие интерактивные элементы.

Ключевые моменты

Заголовок раздела «Ключевые моменты»
  • Переходы используются для простых изменений, анимации - для более сложных.
  • Важно оптимизировать анимации, чтобы они не влияли на производительность страницы.
  • Используйте инструменты разработчика браузера для отладки анимаций.
  • Понимание timing-function позволяет контролировать скорость изменения свойств.
  • animation-fill-mode управляет стилями до и после завершения анимации.

Интерактивный пример

Заголовок раздела «Интерактивный пример»