В этом практическом уроке я покажу вам несколько простых анимаций, которые можно создать с помощью ключевых кадров (keyframes) в CSS. Это будут простые примеры, более сложные варианты рассмотрим в последующих уроках. Желательно, чтобы сначала вы ознакомились с теоретической частью — рассмотрели CSS-анимацию (animation) и ключевые кадры @keyframes.
С помощью ключевых кадров @keyframes
CSS можно создавать практически любую анимацию. В основе их работы заключается принцип сменяемости CSS стилей за определенный период времени. Изменять CSS стили можно сколь угодно раз и в любые промежутки времени.
А теперь давайте перейдем к практике.
Для начала нам нужно создать 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.
Чтобы создать анимацию подпрыгивания кнопки, я использую свойство 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; }
По схожему принципу делаю следующие виды анимаций.
Для этой анимации я использую свойство непрозрачности (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; }
Идем дальше, и по схожему принципу сделаем другие виды анимации.
Для этой анимации я использую свойство масштабирования 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; }
Для этой анимации я также использую свойство непрозрачности 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; }
Здесь похожая анимация с первым примером — подпрыгиванием (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; }
Если собрать воедино все вышерассмотренные виды анимации, то получится вот такое демо, что на видео:
Если вам понравился сегодняшний урок, поделитесь с друзьями. Если у вас есть вопросы/пожелания по данной теме, не стесняйтесь оставлять комментарии в соответствующем разделе ниже. Благодарю за внимание!
Чтобы избегать ошибок, нужно набираться опыта; чтобы набираться опыта, надо делать ошибки Лоуренс Питер
Краткое определение Черного SEO Черное СЕО (или Черная оптимизация) — это любая практика, целью которой…
Получение водительских прав категории C открывает двери к профессиональной деятельности, связанной с управлением грузовыми автомобилями.…
Выход айфонов 15 и 16 поколения — не повод забыть об устройствах 14-го, которые продолжают…
Очень неприятно получается, когда вы приложили много усилий, труда и сил, чтобы создать картинку, а…