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

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

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

@keyframes

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

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

@keyframes animation-name{ }

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

.element { 
 animation: animation-name; 
}

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
@keyframes animation-name { 
  0% { 
 color: pink; 
  } 
  50% { 
 color: yellow; 
  } 
  100% {
 color: blue;
 }
}

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

@keyframes animation-name { 
  from { 
 color: black; 
  } 
  to {
 color: white;
 }
}

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

body {
  animation: change-background 4s ease infinite;
}

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

Свойство animation

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

animation: duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name;

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

animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 2s;
animation-iteration-count: infinite;

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

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

duration – задает длительность анимации от начала и до конца;

timing-function – задает способ передвижения анимации вдоль временного «трека», например, ease, ease-in, linear и т.д;

delay – время задержки (если оно есть) старта анимации;

iteration-count – сколько раз играть анимацию, для зацикливания можно использовать значение infinite.

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

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

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

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

НАПРАВЛЕНИЕ

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

Значение normal проигрывает анимацию от начала и до конца. Значение reverse проигрывает анимацию наоборот, снизу вверх, от 100% до 0%.

Значение alternate проигрывает анимацию сначала вперед, потом назад. Значение alternate-reverse сначала назад, потом вперед.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

backwards – применяются стили первого кейфрейма (0%) до проигрывания анимации и установки задержки;

forwards – стили последнего кейфрейма (100%) остаются активны после проигрывания анимации;

both – правила работают как для backwards так и для forwards.

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

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

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

.highlight {
  animation: move-highlight 4s linear infinite;
}
.highlight:hover{
  animation-play-state: paused;
}

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

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

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

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

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

figure {
  position: relative; 
  overflow: hidden;
  margin: 0;
  height: 100%;
  width: 100%;
  filter: grayscale(.8);
}
figure::before {
 position: absolute;
 top: 50%;
 left: 50%;
 z-index: 2;
 display: block;
 content: '';
 width: 0;
 height: 0;
 background: rgba(255,255,255,.2);
 border-radius: 100%;
 transform: translate(-50%, -50%);
 opacity: 0;
}

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

figure:hover{
 animation: bloom ease-in-out .75s forwards;
}
figure:hover::before {
 animation: circle .75s;
}

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

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

@keyframes bloom {
 0% {
  filter: grayscale(.8);
 }
 40% {
  filter: grayscale(.5);
 }
 100% {
  filter: grayscale(0);
 }
}
@keyframes circle {
 0% {
  opacity: .5;
 background: rgba(213,156,34,.2);
 }
 40% {
  opacity: 1;
 background: rgba(213,34,160,.2);
 }
 100% {
  width: 200%;
  height: 200%;
  opacity: 0;
 }
}

В анимации 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.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree