Создаем CSS анимации и переходы без лишних сложностей

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

Анимация — это не просто украшение. Это мощный инструмент, который помогает направлять внимание пользователя, делать интерфейс более интуитивным и просто приятным в использовании. В этом уроке мы разберем два ключевых свойства, которые помогут вам оживить любой сайт: transition и animation.

CSS transition: плавные переходы для простых эффектов

Свойство transition создано для того, чтобы делать изменения состояний элемента плавными и элегантными. Представьте, что вы хотите, чтобы кнопка плавно меняла цвет при наведении курсора, а не делала это резко. Вот тут нам и поможет transition.

Это свойство позволяет анимировать переход от одного значения CSS-свойства к другому.

Ключевые свойства transition:

• transition-property: Указывает, какое именно свойство будет анимировано. Например, background-color, transform или opacity.
• transition-duration: Определяет время, за которое должен произойти переход. Значение указывается в секундах (s) или миллисекундах (ms).
• transition-timing-function: Задает скорость анимации. Например, ease (по умолчанию, медленный старт и финиш), linear (равномерная скорость), ease-in (медленный старт) и другие.
• transition-delay: Устанавливает задержку перед началом анимации.

Пример использования:

Представьте, что у нас есть кнопка .my-button. Мы хотим, чтобы при наведении на нее курсора она плавно меняла цвет фона.

.my-button {
  background-color: #3498db;
  transition-property: background-color;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

.my-button:hover {
  background-color: #2980b9;
}

Все эти свойства можно объединить в одно сокращенное: transition: background-color 0.3s ease;. Это гораздо удобнее!

CSS animation и @keyframes: сложные и многоступенчатые анимации

Для более сложных сценариев, где требуется многошаговая анимация или повторяющиеся эффекты, используем свойство animation. Главное его отличие от transition в том, что оно не требует изменения состояния (например, hover) для запуска. Анимация может начаться сразу после загрузки страницы.

Сердце любой animation — это правило @keyframes. Оно позволяет определить ключевые «кадры» и состояния элемента на разных этапах анимации (от 0% до 100%).

Ключевые свойства animation:

• animation-name: Имя, которое вы даете вашей анимации, определенной в @keyframes.
• animation-duration: Длительность одного цикла анимации.
• animation-timing-function: Скорость анимации, как и в transition.
• animation-iteration-count: Количество повторений анимации. Значение infinite позволяет ей повторяться бесконечно.
• animation-direction: Направление воспроизведения. normal, reverse или alternate (туда-обратно).
• animation-fill-mode: Что происходит со стилями элемента до и после анимации. Например, forwards сохраняет стили из последнего кадра анимации.

Пример использования:

Создадим простую анимацию, которая заставляет блок мигать.

@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

.pulsating-box {
  width: 100px;
  height: 100px;
  background-color: #e74c3c;
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Как и в случае с transition, все свойства animation можно объединить в одну строку: animation: pulse 2s infinite;.

Видеоурок: полное руководство

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

Изучайте, экспериментируйте и не бойтесь делать свои проекты живыми и интерактивными! Если у вас есть вопросы, обязательно пишите их в комментариях под видео.

Автор: Александр Сокирка

Занимаюсь веб разработкой с 2007 года. Имею большой опыт в веб-дизайне и разработке сайтов. Являюсь автором YouTube канала Быть Программистом. Основатель бренда Aletheme и автор тем для WordPress на маркетплэйсе Envato. С 2017 года занимаюсь обучением людей желающим стать программистами. Мои обучающие программы можно найти на этом сайте или на Udemy.