Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 17.04.2024)
456050
солдат
347
самолетов
325
вертолетов
7193
танков
13827
ББМ
11624
артиллерия
760
ПВО
1046
РСЗО
15587
машин
26
корабли и катера
Создаем 5 простых CSS анимаций используя ключевые кадры
Опубликовано

Создаем 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;
}

 

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

 

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

 

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *