Создаем 5 простых CSS анимаций используя ключевые кадры

В этом практическом уроке я покажу вам несколько простых анимаций, которые можно создать с помощью ключевых кадров (keyframes) в CSS. Это будут простые примеры, более сложные варианты рассмотрим в последующих уроках. Желательно, чтобы сначала вы ознакомились с теоретической частью — рассмотрели CSS-анимацию (animation) и ключевые кадры @keyframes.

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

А теперь давайте перейдем к практике.

Как создать CSS анимацию с @keyframes

Для начала нам нужно создать HTML элемент, для которого задействовать анимацию. Это может выглядеть примерно так:

<div class="blok-dlya-animaciyi">
  <button class="animaciya {тип анимации} btn-button">Кнопка</button>
</div>

С помощью приведенного выше кода я создал родительский элемент div с классом blok-dlya-animaciyi (обертку для анимированного элемента), и дочерний элемент Кнопка (button) с нужными классами: animaciya (общие настройки анимации) и {тип анимации} (заменить позже конкретным типом анимации). Ниже присваиваем CSS стили для общих настроек анимации:

/* Общая конфигурация анимации (продолжительность и режим) */
.animaciya {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
}

Далее, используя класс {тип анимации}, я буду определять, какую анимацию хочу применить к элементу.

Ниже я приведу пример 5 основных и простых анимаций, которые можно легко создать только с помощью ключевых кадров @keyframes в CSS.

Анимация подпрыгивания (bounce)

Чтобы создать анимацию подпрыгивания кнопки, я использую свойство transform, чтобы изменять координаты объекта и с помощью ключевых кадров @keyframes распределить по времени эти изменения. Следующий код позволяет перемещать кнопку вверх и вниз (по вертикальной оси). Обратите внимание, что мы должны заменить класс {тип анимации} на bounce (в данном случае; ниже в примерах — другие классы). Добавьте эти стили в свой HTML файл и так вы задействуете анимацию в виде подпрыгивания кнопки:

/* Ключевые кадры анимации подпрыгивания (bounce) */
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
  40% {-webkit-transform: translateY(-30px);}
  60% {-webkit-transform: translateY(-15px);}
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-30px);}
  60% {transform: translateY(-15px);}
}
/* применяю анимацию подпрыгивания (bounce) для кнопки */
.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

По схожему принципу делаю следующие виды анимаций.

Анимация появления/исчезновения через затухание (fade)

Для этой анимации я использую свойство непрозрачности (opacity) в CSS: для появления (fadeIn) кнопки — от 0 до 1, а для угасания (fadeOut) — от 1 до 0. Вот такой получается CSS код:

/* Ключевые кадры анимации появления через затухание fadeIn */
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
/* применяю анимацию появления через затухание (fadeIn) к кнопке */
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
/* Ключевые кадры анимации исчезновения через затухание fadeOut */ 
@-webkit-keyframes fadeOut { 
  0% {opacity: 1;} 
  100% {opacity: 0;} 
}
@keyframes fadeOut {
  0% {opacity: 1;}
  100% {opacity: 0;} 
}
/* применяю анимацию исчезновения через затухание (fadeOut) для кнопки */ 
.fadeOut { 
  -webkit-animation-name: fadeOut; 
  animation-name: fadeOut;
}

Идем дальше, и по схожему принципу сделаем другие виды анимации.

Анимация пульсирования (pulse)

Для этой анимации я использую свойство масштабирования scale:

/* Ключевые кадры анимации пульсирования (pulse) */
@-webkit-keyframes pulse {
  0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(1.1); }
  100% { -webkit-transform: scale(1); }
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
/* применяю анимацию пульсирования (pulse) для кнопки */
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

Анимация вспышки (flash)

Для этой анимации я также использую свойство непрозрачности opacity CSS, но с большей частотой, чтобы получить эффект вспышки:

/* Ключевые кадры анимации вспышки (flash) */
@-webkit-keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}
@keyframes flash {
  0%, 50%, 100% {opacity: 1;}
  25%, 75% {opacity: 0;}
}
/* применяю анимацию вспышки (flash) для кнопки */
.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

Анимация встряхивания/дрожания (shake)

Здесь похожая анимация с первым примером — подпрыгиванием (bounce), но вместо вверх/вниз, я двигаю элемент по горизонтали — слева направо:

/* Ключевые кадры анимации встряхивания (shake) */
@-webkit-keyframes shake {
  0%, 100% {-webkit-transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
  20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
}
@keyframes shake {
  0%, 100% {transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
  20%, 40%, 60%, 80% {transform: translateX(10px);}
}
/* применяю анимацию встряхивания (shake) для кнопки */
.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

Если собрать воедино все вышерассмотренные виды анимации, то получится вот такое демо, что на видео:

Если вам понравился сегодняшний урок, поделитесь с друзьями. Если у вас есть вопросы/пожелания по данной теме, не стесняйтесь оставлять комментарии в соответствующем разделе ниже. Благодарю за внимание!