От автора: CSS переходы и трансформации отлично подходят для создания визуального взаимодействия на основе изменений состояния. Чтобы лучше контролировать происходящее на экране, можно воспользоваться свойством CSS анимации для создания простой анимации на @keyframes. У данной техники широкий спектр применения в дизайне, с ее помощью можно создавать умопомрачительные загрузчики, интерактивные интерфейсы, эффекты и полноэкранные истории. В этом уроке вы узнаете, как применять ваши знания о CSS переходах, чтобы быстро освоить анимацию, а также как с помощью @keyframes применять различные стили к элементу в разные промежутки времени.
@keyframes
CSS keyframes позволяет производить изменения постоянно и автоматически, а не только в ответ на события мыши, как в transition. С помощью кейфреймов можно менять CSS стили для заданного селектора в любой точке в момент смены состояния или события, определенного через JQuery (например, скролинг). Данное правило используется в паре со свойством animation, с помощью которого можно задать duration, timing function, delay и direction. Свойства типа transform, если они входят в анимацию, объявляются внутри правила @keyframes.
Для начала каждое правило @keyframe должно иметь уникальное имя:
|
1 |
@keyframes animation-name{ } |
Это имя используется в стилях элемента в свойстве animation:
|
1 2 3 |
.element { animation: animation-name; } |
В кейфрейме задаются правила, выраженные в процентах. Проценты представляют собой точки вдоль временной линии анимации, внутри которых задаются стили для рендеринга на элементе:
|
1 2 3 4 5 6 7 8 9 10 11 |
@keyframes animation-name { 0% { color: pink; } 50% { color: yellow; } 100% { color: blue; } } |
В этом примере элемент div с классом element меняет цвет с розового на желтый и в конце на синий. Если точек всего две, можно использовать from и to:
|
1 2 3 4 5 6 7 8 |
@keyframes animation-name { from { color: black; } to { color: white; } } |
Пример применения этого простого правила к фоновому цвету для изменения body:
|
1 2 3 |
body { animation: change-background 4s ease infinite; } |
ПОЛНОЭКРАННОЕ ДЕМО
Свойство animation
Сам по себе @keyframes без инструкций, которые определяют длительность, временную функцию и направление, ничего не делает. Все эти инструкции работают точно так же, как и в свойстве transition. Все эти подсвойства можно задать в одном свойстве animation с помощью следующего синтаксиса:
|
1 |
animation: duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name; |
Или их можно задать отдельно, добавив слово animation перед каждым подсвойством:
|
1 2 3 4 |
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 сначала назад, потом вперед.
РЕЖИМ ЗАЛИВКИ
Подсвойство animation-fill-mode задает, будут ли видны стили до или после проигрывания анимации.
По умолчанию (normal) стили в кейфреймах не влияют на элемент до или после анимации. Режим заливки удобно ставить, если нужно заморозить конечное состояние анимации элемента до тех пор, пока что-нибудь не произойдет, или для того, чтобы пофиксить резкий возврат к первичному состоянию (как в нашем демо с фоновым цветом выше). Описание каждого значения:
backwards – применяются стили первого кейфрейма (0%) до проигрывания анимации и установки задержки;
forwards – стили последнего кейфрейма (100%) остаются активны после проигрывания анимации;
both – правила работают как для backwards так и для forwards.
Ниже я покажу, как с помощью режима заливки избежать резкого мигания.
СОСТОЯНИЕ ПРОИГРЫВАНИЯ
Состояние проигрывание можно задать в paused и running. Одно из полезных применений play-state – это ставить анимацию на паузу при наведении мыши. Если вернуться к первому демо и навести курсор на движущуюся строку, она остановится.
|
1 2 3 4 5 6 |
.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 код для контейнера изображения и псевдоэлемента, который ложится поверх него:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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. Эти свойства задают свои значения по умолчанию еще до срабатывания анимации.
|
1 2 3 4 5 6 |
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 секунды.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
@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, тут все похоже. Просто кликните на временную шкалу, перетащите элемент на позицию, задайте свойства анимации и повторите действия для новых точек. Проиграйте код для проверки, после чего его можно скопировать.
Источник: //webdesignerwall.com/
Редакция: Команда webformyself.
