Создаем 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;
}
Если собрать воедино все вышерассмотренные виды анимации, то получится вот такое демо, что на видео:
Если вам понравился сегодняшний урок, поделитесь с друзьями. Если у вас есть вопросы/пожелания по данной теме, не стесняйтесь оставлять комментарии в соответствующем разделе ниже. Благодарю за внимание!
Нужно больше информации?
