Создаем 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; }
Если собрать воедино все вышерассмотренные виды анимации, то получится вот такое демо, что на видео:
Если вам понравился сегодняшний урок, поделитесь с друзьями. Если у вас есть вопросы/пожелания по данной теме, не стесняйтесь оставлять комментарии в соответствующем разделе ниже. Благодарю за внимание!
This post was last modified on 15/02/2024 15:08
Последние посты
Генри Форд
Человек имеет два мотива поведения — один настоящий и второй, который красиво звучит Генри Форд…
Фридрих Ницше
Не нужно додумывать слишком много. Так вы создаете проблемы, которых изначально не было Фридрих Ницше…
Такой разный инвертор! Выбираем между кондиционерами Inverter, Inverter DC и Full DC
Лето в разгаре, а значит самое время задуматься о покупке кондиционера. Но как не потеряться…
Омар Хайям
Настоящий друг — это человек, который в глаза тебе выскажет все, что о тебе думает,…
Полезные советы по выбору раздвижной двери
Следует знать, что функциональность и дизайн работают рука об руку, когда вы используете раздвижную дверь.…