Простая CSS анимация с помощью @keyframes

От автора: CSS переходы и трансформации отлично подходят для создания визуального взаимодействия на основе изменений состояния. Чтобы лучше контролировать происходящее на экране, можно воспользоваться свойством CSS анимации для создания простой анимации на @keyframes. У данной техники широкий спектр применения в дизайне, с ее помощью можно создавать умопомрачительные загрузчики, интерактивные интерфейсы, эффекты и полноэкранные истории. В этом уроке вы узнаете, как применять ваши знания о CSS переходах, чтобы быстро освоить анимацию, а также как с помощью @keyframes применять различные стили к элементу в разные промежутки времени.

@keyframes

CSS keyframes позволяет производить изменения постоянно и автоматически, а не только в ответ на события мыши, как в transition. С помощью кейфреймов можно менять CSS стили для заданного селектора в любой точке в момент смены состояния или события, определенного через JQuery (например, скролинг). Данное правило используется в паре со свойством animation, с помощью которого можно задать duration, timing function, delay и direction. Свойства типа transform, если они входят в анимацию, объявляются внутри правила @keyframes.

Для начала каждое правило @keyframe должно иметь уникальное имя:

Это имя используется в стилях элемента в свойстве animation:

В кейфрейме задаются правила, выраженные в процентах. Проценты представляют собой точки вдоль временной линии анимации, внутри которых задаются стили для рендеринга на элементе:

В этом примере элемент div с классом element меняет цвет с розового на желтый и в конце на синий. Если точек всего две, можно использовать from и to:

Пример применения этого простого правила к фоновому цвету для изменения body:

ПОЛНОЭКРАННОЕ ДЕМО

Свойство animation

Сам по себе @keyframes без инструкций, которые определяют длительность, временную функцию и направление, ничего не делает. Все эти инструкции работают точно так же, как и в свойстве transition. Все эти подсвойства можно задать в одном свойстве animation с помощью следующего синтаксиса:

Или их можно задать отдельно, добавив слово animation перед каждым подсвойством:

… ну вы поняли.

Не все подсвойства обязательны, но они должны быть записаны в правильном порядке, чтобы браузер мог правильно применить timing value и отличить имя анимации от других ключевых слов. Краткое описание подсвойств, которые нам понадобятся:

ПОЛНОЭКРАННОЕ ДЕМО

Помимо уже знакомых нам значений (благодаря свойству transition) анимация также принимает direction, iteration-count, play-state и fill-mode.

КОЛИЧЕСТВО ИТЕРАЦИЙ

По умолчанию анимация проходит один цикл и завершается. В свойстве animation-iteration-count можно указать значение в виде числа, т.е. сколько раз должна запуститься анимация. Также для зацикливания можно использовать ключевое слово infinite.

НАПРАВЛЕНИЕ

Подсвойство animation-direction задает не визуальное направление анимации (положение, начальное и конечное состояние задаются в стилях), а указывает порядок запуска кейфреймов. Подсвойство принимает значения normal, reverse, alternate и alternate-reverse.

РЕЖИМ ЗАЛИВКИ

Подсвойство animation-fill-mode задает, будут ли видны стили до или после проигрывания анимации.

По умолчанию (normal) стили в кейфреймах не влияют на элемент до или после анимации. Режим заливки удобно ставить, если нужно заморозить конечное состояние анимации элемента до тех пор, пока что-нибудь не произойдет, или для того, чтобы пофиксить резкий возврат к первичному состоянию (как в нашем демо с фоновым цветом выше). Описание каждого значения:

Ниже я покажу, как с помощью режима заливки избежать резкого мигания.

СОСТОЯНИЕ ПРОИГРЫВАНИЯ

Состояние проигрывание можно задать в paused и running. Одно из полезных применений play-state – это ставить анимацию на паузу при наведении мыши. Если вернуться к первому демо и навести курсор на движущуюся строку, она остановится.

Можно было бы использовать animation: paused; или animation-play-state: paused;, но для перезаписи предыдущего значения при смене состояния лучше использовать специальное подсвойство.

Создание эффекта фотозатвора при наведении на изображение с помощью анимации и @keyframes

ПОЛНОЭКРАННОЕ ДЕМО

Пример демонстрирует эффект «затвора» при наведении курсора на изображение в галерее. В отличие от простого эффекта hover с помощью transition эта CSS анимация использует кейфреймы для постепенного изменения прозрачности псевдоэлемента, изменения его размера и удаления CSS3 фильтра с оттенками серого, который добавлен ко всем изображениям.

Важный CSS код для контейнера изображения и псевдоэлемента, который ложится поверх него:

Обратите внимание, что на элементы установлены filter и opacity. Эти свойства задают свои значения по умолчанию еще до срабатывания анимации.

Теперь цеплямем свойство animation к событию, которое должно запускать анимацию. Самый простой способ – использовать :hover. Также можно задать специальный класс по событию, определенному с помощью JQuery.

К первой анимации привязан кейфрем bloom с временной функцией ease-in-out и длительностью 0.75 секунды, после чего с помощью animation-fill-modeи значения forwards возвращаемся к оригинальным стилям. Так наш эффект не перепрыгнет к эффекту оттенков серого. Ко второй анимации привязан кейфрейм circle с длительностью 0.75 секунды.

В анимации bloom мы постепенно убираем фильтр с оттенками серого, установленный на элемент figure (с 0.8 до 0). После завершения анимации с помощью режима заливки сохраняется значение 0. Если не указать это свойство, изображение перепрыгнет на первичное состояние.

Во второй анимации circle мы изменяем прозрачность с половины до единицы, меняем цвет с желтого на розовый, затем расширяем элемент и снижаем прозрачность до 0.

Это основы для создания простого эффекта «пульса» или затвора. Обратите внимание, что тут прозрачность отделена от RGBA и используется свойство opacity!

Готовые инструменты

Как только вы освоите основы CSS анимации, вы поймете, что возможности безграничны. До сих пор есть множество замечательных библиотека и инструментов, с помощью которых можно быстро создавать CSS анимации. Самые лучшие инструменты:

ANIMATE.CSS

В предыдущей статье я показал вам, как с помощью Flexbox создать макет, разделенный на две части, а также как с помощью библиотеки animate.css анимировать открытие страниц с контентом и изображения. В Animate.css есть несколько встроенных анимаций, которые можно посмотреть и вставить в свой проект с помощью одного класса. Кроме того, библиотека учит применять и удалять классы к элементам с помощью JQuery. Прочтите эту статью, чтобы научиться привязывать анимацию к событиям типа клик или скрол.

CUBIC BEZIER TOOL

cubic-bezier.com дает удивительный визуальный интерфейс для создания собственных временных кубических функций Безье. Результат виден в реальном времени. Код можно напрямую скопировать в свои стили.

CSS ANIMATE

Сервис CSS Animate web tool позволяет генерировать полноценные блоки кейфрейм анимаций. С его помощью можно быстро перейти к созданию сложных временных линий. Если вы знакомы с Flash, тут все похоже. Просто кликните на временную шкалу, перетащите элемент на позицию, задайте свойства анимации и повторите действия для новых точек. Проиграйте код для проверки, после чего его можно скопировать.

Источник: http://webdesignerwall.com/

Редакция: Команда webformyself.

• Возможности программы Km Player
• Обучение Wialon Hosting - инструкция для пользователей
• Хаоган - Инструкция по обучению
• Программа для скачивания игр на компьютер бесплатно
• Долго загружается ноутбук при включении на windows 10
• Включаем Bluetooth на ноутбуке с Windows 10
• Установка драйверов на Windows 7: автоматически, вручную, способы и инструкция
• Ростелеком - подключение, настройка wifi роутера
• Как установить операционную систему Windows 7
• Опера экспресс панель - сохранить, установить, настроить, восстановить, сделать стартовой, создать тему