CSS-анимация


Содержание

Анимация CSS: примеры

В создание анимации можно не только ограничиваться специальными программами, а и использовать возможности каскадной таблицы CSS3. Опираясь на знания и свою фантазию вырисовывать эффекты в CSS анимации без использования каких-либо дополнений. Тем более CSS анимация — это хороший способ произвести впечатления на своих пользователей при правильном ее размещении. С помощью анимации CSS можно заставить шевелиться практически все, текст, картинку, произвольные фигуры и все остальное что придет на ум.

В статье постараемся подробнее ознакомиться с возможностями анимации и ее применениями. А также приведем несколько интересных примеров с различными эффектами.

Поддержка браузеров.

Для поддержки анимации всеми популярными браузерами применяется нестандартное свойство, префикс. Оно обозначается в начале строки каждому браузеру в отдельности.

Браузер Explorer Chrome Firefox Safari Opera
Версия 10.0 4.0 16.0 4.0 15.0
animation -webkit- -moz- -webkit- -webkit-

Internet Explorer 10 поддерживает без префикса. Браузер Опера распознает префикс –webkit поэтому значение -o- можно не применять.

Начальный кадр анимации.

С помощью свойства @keyframes создается начальный кадр анимации, который необходимо привязать к определенному селектору. Затем указать по крайней мере два действия:

— название анимации
— продолжительность анимации

Пример.

HTML

CSS

Примечание: Если не указана продолжительность анимации, то никаких действий не произойдёт поскольку по умолчание она равна нулю.

Как работает CSS анимация?

Анимация дает возможность переходить с одного стиля на другой при этом плавно их меняя. Изменить можно многие элементы, а главное – неоднократно, столько раз сколько нужно. Переход анимации указывается в процентах от 0% до 100% или же ключевыми словами от «from» до «to».

Пример.

HTML

CSS

Примеры анимации в логотипе.

Возможно, данное применение нечасто встретится в веб-дизайне разве что за исключение в промо — роликов. Но весьма будет интересным для глаз и может вдохновить на бедующее создание логотипа.

Другие примеры анимации

Где еще можно применить анимацию? Да где угодно, анимация способна двигать многие веб-элементы: меню, ссылки, обычный текст и т.д. Действия практически неограниченные, даже с помощью анимации возможно заменить некоторые javascript`ы.

CSS анимация для самых маленьких

Приветствую, друзья! Сегодня мы рассмотрим интереснейшую тему — создание CSS анимаций на реальном примере. Кульминацией данного урока будет создание красивой CSS анимации логотипа на миллион долларов.

Материалы урока

  • Исходники: Скачать
  • Базовый пример из урока: https://codepen.io/agragregra/pen/PKNavm
  • Стартовый шаблон из урока: https://github.com/agragregra/optimizedhtml-start-template

Немного теории

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

Если у вас уже был опыт создания анимаций в каких-либо приложениях, таких, как Adobe After Effects или престарелый Flash Professional (ныне Adobe Animate), то вам должны быть знакомы такие понятия, как «Ключевые кадры», «Временные функции или динамика движения», которые, как и в любой другой сфере анимации применимы и к анимации элементов на странице посредством CSS. Однако, в отличие от работы с интерфейсами приложений, вы создаёте вашу CSS анимацию посредством написания кода в редакторе.

CSS правило @keyframes

Создание CSS анимации начинается с объявления имени анимации в блоке @keyframes и определения так называемых шагов анимации или ключевых кадров.

Для рассмотрения теории и основ мы будет использовать чистый CSS, а в дальнейшем, уже на более сложном примере подключим использование Sass препроцессора. Подробнее узнать о Sass вы можете в уроке «Sass для самых маленьких — Подробное руководство». Кроме того, для более глубокого понимания основ CSS, также рекомендую ознакомиться с уроками «Основы CSS — Руководство для самых маленьких» и «Все CSS селекторы в одном уроке»

Давайте рассмотрим структуру @keyframes и работу с ключевыми кадрами на простом примере:

В первой строчке мы видим, что после ключевого слова @keyframes идёт его название « turning». Это и есть наименование блока кеймфреймов, к которому мы будем обращаться далее.

После объявления открывается фигурная скобка (в данном примере на чистом CSS), в которой последовательно от 0% до 100% прописываются свойства для каждого ключевого кадра. Обратите внимание, что между 0% и 100% вы можете вставлять сколько угодно промежуточных значений, будь-то 50%, 75% или даже 83%. Это очень похоже на таймлайн приложения для создания анимации, где между двумя состояниями можно добавить любое промежуточное.

Далее этот блок кода с ключевыми кадрами можно применить к любому CSS селектору, но чаще всего они готовятся для конкретного селектора, если мы хотим добиться определённого поведения именно от нужного блока.

Обращение к блоку ключевых кадров

После того, как мы задали ключевые кадры для объекта (в жизни это делается параллельно или даже после обращения к блоку с ключевыми кадрами), можно обратиться к нашему новоиспечённому блоку. Давайте посмотрим на следующий простой код из примера выше:

Ничего особенного до последней строчки. Здесь мы определяем то, как будет выглядеть объект изначально и в последней строчке блока обращаемся к блоку ключевых кадров с наименованием «turning»:

Если с определением ключевых кадров всё относительно понятно, то данная строчка нуждается в немедленном объяснении. Как мы видим, сначала идёт CSS свойство «animation». Это сокращённая форма записи, как например, свойство «margin: 20px 30px 40px 50px», которое можно разделить на несколько отдельных свойств:

По данной аналогии, составное свойство «animation» можно разделить на несколько отдельных свойств:

animation-name Название анимации, к которому происходит обращение из @keyframes
animation-duration Продолжительность или на какое время растягивается выполнение CSS анимации. Может задаваться в секундах (s) или миллисекундах (ms)
animation-timing-function Временная функция, динамика движения объекта или изменения свойства (ease — (по-умолчанию) анимация начинается медленно, разгоняется и заканчивается медленно; linear — анимация происходит равномерно; ease-in — начинается медленно и ускоряется к последнему ключевому кадру; ease-out — начинается быстро и плавно замедляется вконце; ease-in-out — медленно начинается и медленно заканчивается)
animation-delay Время задержки анимации ДО старта. Также задаётся в секундах или миллисекундах
animation-iteration-count Количество повторов (итерации) анимации (infinite — бесконечно, или можно задать простое число без единиц измерения)
animation-direction Направление анимации, последовательно, вспять или «туда-обратно» (normal — (по-умолчанию) анимация проигрывается от начала до конца и останавливается; alternate — проигрывается от начала до конца и в обратном направлении; alternate-reverse — проигрывается с конца до начала и обратно; reverse — анимация проигрывается с конца.)
animation-play-state Управление проигрыванием анимации (paused (пауза), running (запуск) и т.д.). Можно применить на :hover или из функции JS при необходимости
animation-fill-mode Состояние элемента до и после воспроизведения анимации. Например, значение backwards позволяет вернуть все свойства к исходному состоянию сразу после применения анимации

Чаще всего опытные разработчики не пишут все эти свойства по отдельности, а используют краткую запись и структура её такова:

animation: (1. animation-name — название) (2. animation-duration — продолжительность) (3. animation-timing-function динамика движения) (4. animation-delay — пауза перед стартом) (5. animation-iteration-count — количество выполнений) (6. animation-direction — направление)

Из примера мы видим, что мы обращаемся к блоку @keyframes animationname, задаём продолжительность выполнения анимации 2 секунды, динамика линейная, пауза перед запуском составляет 1 секунду, повторяется анимация бесконечно и выполняется в обратную сторону.

Как я уже говорил ранее, начинается краткая запись со свойства «animation», после чего идут значения, последовательность которых лучше не забывать, чтобы не возникало путаницы при написании CSS анимации.

Однако, большинство этих свойств можно опустить, так как чаще всего их значения по-умолчанию вполне удовлетворят большинство задач по созданию анимации. Какие-то из них можно не писать, однако оставшиеся следует указывать в той последовательности, которую мы рассмотрели ранее. Вообще, для функционирования вашей анимации достаточно всего два параметра в вашем составном свойстве — название (animation-name) и продолжительность (animation-duration).

Премиум уроки от WebDesign Master

Создание контентного сайта на Jekyll от А до Я

Девять простых примеров CSS3 анимации

CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.

Удивительно, как простые вещи могут оживить обычную веб-страницу, сделать ее более доступной для восприятия пользователями. Речь идет о CSS3 переходах, с помощью которых можно позволять элементу трансформироваться и изменять стиль, например, при наведении курсора. Девять примеров CSS3 анимации, которые доступны ниже, помогут создать на сайте атмосферу отзывчивости, а также улучшить общий вид страницы благодаря красивым плавным переходам.

Для более детального ознакомления вы можете скачать архив с файлами.

Все эффекты работают с помощью свойства transition (англ. transition — «переход», «превращение») и псевдокласса :hover , который определяет стиль элемента при наведении на него курсора мыши (подробнее о псевдоклассах в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.

1. Изменение цвета при наведении курсора

Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс :hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:

2. Появление рамки

Интересная и яркая трансформация — внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс :hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px ) и её цвет:

3. Свинг

Данная CSS анимация — исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:

  • @keyframes — базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
  • animation и animation-iteration-count — свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.

4. Затухание

Эффект плавного затухания — это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 — то есть полная непрозрачность, после чего указать её значение при наведении мыши — 0.6 :

Для противоположного результата поменяйте значения местами:

5. Увеличение

Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:

6. Уменьшение

Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:

7. Трансформация в круг

Одна из часто используемых анимаций — прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с :hover и transition , это можно реализовать без проблем:

8. Вращение

Забавный вариант анимации — поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением — rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:

9. 3D тень

Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):

Поддержка браузерами

На сегодняшний день свойство transition поддерживается следующими браузерами:

Десктопные браузеры
Internet Explorer Поддерживается версией IE 10 и выше
Chrome Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit- )
Firefox Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz- )
Opera Поддерживается с версии 12.1
Safari Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit- )
Мобильные браузеры
iOS Safari & Chrome Поддерживается с версии 7.0 (в версиях 3.2-6.1 работает с префиксом -webkit- )
Opera Mobile Поддерживается с версии 12.1
Android Browser Поддерживается с версии 4.4 (в версиях 2.1-4.3 работает с префиксом -webkit- )
Chrome/Firefox для Android Поддерживается с версии 47/44
Internet Explorer Mobile Поддерживается версией IE Mobile 10 и выше
UC Browser для Android Поддерживается с префиксом -webkit-

Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.

Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!

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

Дата публикации: 2020-02-23

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

@keyframes

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

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

Все о CSS анимациях

Одним из трех способов оживить контент в HTML является использование, так называемых, CSS анимаций. Принцип их работы достаточно прост. Они предоставляют возможность анимировать свойства CSS тех элементов, которые находятся под их влиянием.

Это позволяет вам создавать всевозможные классные штуки, например, заставлять объекты двигаться, исчезать и появляться, изменять цвет и т.п.

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

В данном уроке вы узнаете все о CSS анимациях для того, чтобы создавать не только что-то простое, подобное движущимся облакам, но и что-то круче, полезнее и т.д. Вы узнаете, как определить CSS анимацию с помощью свойства animation, как работать с ключевыми кадрами, и как « дергать за веревочки » те свойства, которые связанны с анимацией, чтобы заставить вашу анимацию делать в точности то, что вы хотите.

Илон Маск рекомендует:  Что такое код get_magic_quotes_runtime

Создание простой анимации

Самый простой (и самый веселый) способ узнать о CSS анимациях – просто взять готовый кусок работающего кода и потом разобраться, как все это работает. Итак, двигаемся дальше. Создаем новый HTML документ и добавляем следующий HTML и CSS код:

Если вы сделаете предварительный просмотр, то увидите чуть менее захватывающую версию примера, которого вы видели ранее.

Вы увидите отдельное, смещенное от центра облако, стоящее совершенно неподвижно:

Давайте продолжим и добавим анимацию, чтобы не умереть со скуки. Добавление анимации CSS выполняется в два шага. Первый шаг – это назначить свойство animation, а второй – установить ключевые кадры, которые определяют, что именно будет анимировано .

В созданной разметке найдите правило стиля #bigCloud и добавьте следующую выделенную строку:

Подробный разбор кода сейчас не важен, мы ознакомимся с ним позже, когда будет время. А пока что давайте добавим ключевые кадры.

Идем дальше и добавляем следующее правило стиля @keyframes :

Как только вы добавили это правило стиля, просмотрите вашу страницу. Вы должны увидеть ваше облако подпрыгивающим от счастья, словно у него нет никаких забот в этом мире. Супер!

Что это было

То, что вы только что сделали, было добавлением CSS анимации, заставившей ваше облако скакать. CSS анимация предельно проста. Она позволяет вам определить начальное состояние, несколько промежуточных состояний (они же ключевые кадры) и конечное состояние свойств того элемента, который вы желаете оживить. Движение нашего облака очень простое, поэтому изучение того, как оно « оживает », является отличным пунктом для отправления.

Первое, на что мы обратим внимание, само свойство animation:
animation: bobble 2s infinite ;

Свойство animation ответственно за установку вашей анимации. В сокращенном варианте, который вы будете обычно использовать, вы будете указывать следующие 3 величины:

  • имя вашей анимации;
  • продолжительность;
  • количество повторений анимации.

Объявление нашей анимации ничем не отличается. Имя анимации – bobble , продолжительность – 2 секунды, и она зациклена на бесконечное выполнение.

А что насчет вендорных префиксов?

Свойство animation довольно новое, поэтому многие браузеры требуют использовать с ним вендорный префикс, чтобы данное свойство работало надлежащим образом. Не захламляйте этим вашу разметку. Вместо этого пользуйтесь чем-нибудь вроде -prefix- free library , как в нашем примере, чтобы сохранить вашу разметку простой и в то же время позволить устаревшим браузерам воспроизводить вашу анимацию.

Как вы можете увидеть, объявление анимации не содержит много деталей о том, что же будет анимировано. Оно устанавливает высокоуровневое определение того, что ваша анимация будет делать, но сущность самой CSS анимации заключена в ее правиле @keyframes .

Давайте взглянем на наше правило @keyframes для более глубокого понимания:

Первая деталь, которая сразу же бросается в глаза, это структура правила. Снаружи правило содержит объявление @keyframes со следующим далее именем:

Внутри находятся правила стилей (или ключевые кадры), чьи селекторы могут быть выражены либо в процентах, либо с использованием ключевых слов from и to .

Эти правила стиля ключевых кадров значат намного больше, чем вы могли бы себе представить. Они содержат только такие CSS свойства как transform и animation-timing-function , значения которых будут применены, когда правило станет активным. Мы еще вернемся к этому вопросу, а пока есть одна важная деталь о правилах стиля ключевых кадров, с которой вас нужно познакомить.

Итак, все, что я объяснял до этого, было легким для понимания. А теперь обсудим кое-что, в чем немудрено запутаться. Несмотря на то, что свойство animation было объявлено в одном правиле стиля, а ваши ключевые кадры – в правиле @keyframes , они очень тесно связаны друг с другом, и один не функционирует в отсутствие другого.

Наверное, это было бы очень романтично, если бы не было так сложно и запутано. Но наша работа и заключается в том, чтобы разбираться в беспорядке, выяснять, что происходит, и, в конце концов, создавать еще больший беспорядок еще более запутанными путями.

Давайте сначала рассмотрим, как свойство animation и правило @keyframes связаны друг с другом.
Имя

Имя, которое вы дали правилу @keyframes , выступает в роли идентификатора, которым пользуется свойство animation, чтобы знать, где находятся ключевые кадры:

Это вовсе не совпадение, что наше свойство animation ссылается на bobble и имя правила @keyframes тоже bobble . Если есть какое-либо несовпадение в именах, ваша анимация не будет работать.

Продолжительность и ключевые кадры

Из предыдущего параграфа вы узнали, каким образом наше свойство animation осведомлено о его ключевых кадрах. Таким образом, одна загадка разрешена. И сейчас мы попробуем разоблачить еще большую тайну, связанную с продолжительностью анимации и моментом временем, когда правило стиля определенного ключевого кадра становится активным.

Как вы помните, когда мы определяем правила стиля ключевых кадров внутри @keyframes , селектор не выражен в реальной временной величине. Это либо процентное значение, либо ключевое слово from или to :

В нашем примере, процентные величины для селекторов ключевых кадров – это 0%, 50% и 100%. Они представляют собой процент завершенной анимации. Когда анимация только началась, у вас выполнено 0% от анимации. Ключевой кадр «0%» станет активным. Когда анимация достигает середины, ключевой кадр « 50% » становится активным. И наконец, в конце анимации, активизируется ключевой кадр « 100% ».

О селекторе from/to

Вместо определения 0% в роли селектора, вы можете использовать эквивалентное ключевое слово from. Для 100% есть ключевое слово to, которое тоже можно использовать как селектор. На самом деле, я не знаю, почему кто-либо захочет воспользоваться этим, но эти ключевые слова существуют, и если вы решили разобраться во всех дебрях, вам полезно знать об их существовании.

В этом уроке, я точно не буду воздавать дань уважения ключевым словам from и to. С этого момента они официально мертвы для меня, и об их существовании мы не будем больше вспоминать.

Значение продолжительности, которое вы определяете для свойства animation, кроме установки общего времени воспроизведения анимации, еще и помогает вам сопоставить процентные величины с действительными отрезками времени. Так обычно и делается.

Ниже показано, как наши процентные значения соотносятся с промежутками времени для нашей двухсекундной анимации:

Лично меня эта часть сбивает с толку. Если вы раз поняли, как продолжительность отображается в отдельные ключевые кадры, то вы преодолели главное препятствие в отчетливом представлении анимации в вашем воображении.

В любом случае, мы посмотрели достаточно подробно, как работает простая CSS анимация. Вы узнали все о том, как объявить анимацию с помощью свойства animation, и как выглядит правило @keyframes вместе с правилами стиля ключевых кадров. Также мы посвятили немного времени пониманию того, как отдельные части кода взаимосвязаны друг с другом.

Но мы еще не закончили. Есть еще, о чем поговорить более детально. Поэтому сделайте небольшой перерыв, чтобы быть в отличном состоянии для дальнейшего изучения CSS анимаций!

Детальный взгляд на CSS свойство animation

У свойства animation есть намного больше особенностей, чем вы только что видели. Теперь, когда вы уже « запачкали руки » в создании анимации, давайте сделаем что-нибудь менее захватывающее и узнаем все о свойстве animation. Для начала расширим наше сокращенное свойство и рассмотрим его в развернутом виде. Наша сокращенная версия выглядит так:

Три свойства нашей сокращенной версии развернулись в animation-name , animation-duration и animation-iteration-count . То, что эти свойства делают, к этому времени уже должно прочно укорениться в вашем мозгу. Поэтому давайте двигаться дальше и перейдем к задачам, использующим те свойства, которые мы еще не рассматривали, а именно: animation-play-state , animation-delay , animation-direction , animation-fill-mode и animation-timing-function .

Пауза и возобновление анимации

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

Каждый желтый прямоугольник представляет собой 1 итерацию вашей анимации. Если вы поместите каждую итерацию анимации рядом с другой, то получите примерно то же самое, что я привел выше.

Если ваша анимация началась, она не остановится, пока не достигнет конца. Если ваша анимация зациклена, она просто продолжит выполняться с начала, как только достигнет конца. Этот цикл и показан в виде отдельного желтого прямоугольника.

Наша bobble анимация – живое подтверждение такого поведения.

Возможно, иногда вам не захочется, чтобы анимация вела себя подобным образом. Если вы хотите, чтобы ваша анимация не начиналась непосредственно после того, как правило стиля, содержащее определение вашей анимации, стало активным, или если вы хотите остановить вашу анимацию посередине, вы можете поколдовать со свойством animation-play-state. Это свойство позволяет переключать вашу анимацию на воспроизведение или паузу, посредством воздействия на значение running или значение paused.

По умолчанию свойство animation-play-state установлено в состояние running (воспроизведения). Вы можете установить значение paused, чтобы приостановить выполнение:

Когда анимация остановлена, она сохраняет самую последнюю вычисленную величину:

Почти как будто время остановилось. Вы можете возобновить его, установив свойство animation-play-state назад в running. При этом не произойдет внезапного перезапуска, как если бы анимация вернулась обратно в отметку 0% перед возобновлением:

Ваша анимация плавно продолжится с того места, где она была приостановлена – подобно тому, что бы вы ожидали, используя функции Play и Pause в медиаплеере.

Задержка и смещение анимации

Если вы хотите, чтобы анимация воспроизводилась, но не делала ничего в течение некоторого периода времени, то вы захотите познакомиться со свойством animation-delay . Это свойство позволяет определить, сколько секунд пройдет перед началом воспроизведения анимации.

Задержка — это не тот случай, когда задействуется ключевой кадр 0%, и затем вы ждете 5 секунд. Задержка происходит еще до того, как будет достигнут ключевой кадр 0% вашей первой итерации:

После начала воспроизведения анимации, значение задержки больше не используется. Каждая последующая итерация анимации (если есть таковая) просто плавно перетекает из конца одной в начало другой.

Есть еще кое-что, что можно сделать с этим свойством. Вместо определения положительной величины времени для animation-delay, вы можете задать с тем же успехом и отрицательное значение:

Когда вы задаете отрицательное значение, ваша анимация начинается без задержки, но со смещением длительностью, которую вы установили. Вот как будет выглядеть animation-delay со значением -.25 с:

Отрицательный знак играет роль сигнала для браузера, говоря ему о необходимости воспринимать эту величину как смещение, а не задержку. Да, это немного странно, особенно, если брать во внимание, что свойство по-прежнему называется animation-delay, но, как говорится, за что купил, за то и продаю.

Кое-что менее странное: если вы определите смещение больше, чем продолжительность отдельной итерации вашей анимации, то никаких проблем это не вызовет. Ваша анимация начнет воспроизводиться с того места некоторой итерации, которое выпало на начало.

Просто удостоверьтесь, что у вас есть достаточно итераций для отсчета будущей начальной точки. Если же у вас нет достаточного количества итераций, а вы задали большое смещение, ваша анимация попросту не будет воспроизводиться.

Сохраняйте свойства ключевых кадров, пожалуйста!

Если вы не зацикливаете анимацию, то вы заметите, что как только анимация закончилась, любые свойства, установленные ключевыми кадрами, сбрасываются, и ваши элементы возвращаются в прежнее состояние. Это происходит потому, что свойства, применяемые ключевыми кадрами, являются временными.

Они существуют, пока ключевые кадры активны, но в любой другой момент времени значения этих свойств не сохраняются. Может показаться, что ваша анимация внезапно перескакивает в позицию начала или внезапно сбрасывается после своего завершения.

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

Ожидание начала

Первый случай имеет место, когда вы имеете дело с установкой animation-delay. Например, предположим, что вы определили 5-секундную задержку:

В течение 5 секунд ожидания ключевые кадры находятся в неактивном состоянии. Любые свойства, содержащиеся в первом ключевом кадре, не будут применены, пока задержка активна.

Анимация завершена

Второй случай – это, когда ваша анимация завершилась. Скажем, вы задали 3 повтора для вашей анимации:

В конце все свойства, установленные последним ключевым кадром на 3-ей итерации, исчезнут. Элемент, который вы анимировали, вернется в состояние, где ничего не будет напоминать об имевшей место анимации.

Знакомимся с animation-fill-mode

Если вы хотите, чтобы свойства начального ключевого кадра были применены уже во время задержки, или свойства последнего ключевого кадра сохранились по завершению анимации, вы можете установить свойство animation-fill-mode . Вы можете задать такие значения:

  • none
    Все остается по-прежнему. Если вы хотите применить значения свойств ключевого кадра, этот ключевой кадр должен быть активен;
  • forwards
    После того, как анимация завершится, любые значения свойств, имевшиеся в конце анимации, будут сохранены;
  • backwards
    Анимация применит значения для свойств из начального ключевого кадра, даже если кадр еще не активен;
  • both .


Это комплексное решение. Ваша анимация и применит значения к свойствам первого ключевого кадра в начале, и сохранит значения свойств последнего ключевого кадра в конце.

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

Вот почему я никогда не проводил ночей напролет, беспокоясь об этом, поэтому и вы не должны чувствовать себя обязанными объявлять свойство animation-fill-mode, если вы не хотите этого.

Реверс анимации (или перемена направлений)

Теперь давайте разберемся в одном немного странном свойстве. Анимация воспроизводится по умолчанию непрерывно от 0% до 100%. У вас есть возможность поменять такой порядок, установив свойство animation-direction в одно из следующих состояний: normal , reverse , alternate или alternate-reverse .

То, что делают normal и reverse, должно быть и так понятно, давайте рассмотрим более интересные значения: alternate и alternate-reverse.

Когда вы устанавливаете значение alternate-reverse для свойства animation-direction, ваша анимация начинается как обычно. Начиная со второй итерации, она меняет направление на противоположное, что повторяется для каждой последующей итерации:

Установка animation-direction в просто alternate даст похожее с небольшим отличием поведение:

Ваша анимация начнется с реверса, а затем будет менять направление между нормальным и противоположным.

Вольно, солдат!

Последнее свойство, связанное с анимацией, которые мы обсудим, это animation-timing-function. Эта функция позволит вам определить, как ваша анимация будет интерполировать значения свойств на отрезке времени между началом и концом. Я описал функции смягчения намного более детально в уроке Easing Functions in CSS3 (Функции смягчения в CSS3), поэтому за подробной информацией обращайтесь туда.

Сокращение анимации

То, что мы рассматривали до сих пор, является расширенным списком свойств для объявления анимации:

Кто-то, возможно, предпочтет использовать сокращенную версию свойств, когда все свойства и их значения определяются внутри самого свойства animation. Фактически, как вы помните, наша анимация bobble представлена в сокращенной форме:

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

Просто подставляем соответствующую величину для свойства, заключенного в угловые скобки. Заметьте, что свойство animation-play-state не может быть записано в сокращенном варианте. Вам нужно будет явно записать это свойство и его значение.

Так или иначе, заменив наш расширенный вариант на сокращенный, мы получим следующее:

Сокращенная версия выглядит более компактно, чем эквивалентная ей расширенная версия? Безусловно! Она более понятна? А вот на этот вопрос сложнее найти ответ. Все зависит от ваших (или вашей команды) предпочтений.

В большинстве случаев мне нравится пользоваться сокращенной версией для определения свойств animation-name , animation-duration и animation-timing-function , которые мне легко запомнить. Как только я выхожу за пределы значений этих трех свойств, мне приходится обращаться к документации, чтобы узнать, на что ссылаются дополнительные величины.

Ваш разбег в объявлении свойств может варьироваться с учетом ваших взглядов на форму записи (сокращенная или расширенная), так что используйте то, с чем вы чувствуете себя комфортно. И…блестяще уяснив эту часть, самое время попрощаться с детальным разбором свойства animation и сосредоточиться на других достопримечательностях нашего нескончаемого живописного путешествия по стране анимации.

Взглянем на ключевые кадры

Большую часть времени мы провели, разбираясь в свойстве animation, и в том, как оно влияет на анимацию. А настоящие герои CSS анимации – это ключевые кадры. Поэтому давайте уделим им максимум внимания в этой секции.

Илон Маск рекомендует:  Преобразование негатива в позитив

Скажем привет (снова) ключевым кадрам bobble:

Ранее я упоминал, что отдельный ключевой кадр очень похож на правило стиля. Вы вставляете CSS свойства внутрь него, и эти свойства активизируются, когда селектор для этого ключевого кадра становится активным. Следует отметить, что не все CSS свойства могут быть определены внутри ключевого кадра. Вы можете определить только « анимируемые » CSS свойства и свойство animation-timing-function .

Это не такая уж плохая новость, я уверен, что свойства, которые вы хотели использовать в вашем ключевом кадре, входят в список разрешенных для анимации. Вы можете посмотреть полный список « анимируемых » свойств здесь и несколько дополнительных здесь (обратите внимание на значение в колонке, помеченной как Anim.)

Последнее, что нам нужно посмотреть, это свойство animation-timing-function , которое вы также можете задать в ключевом кадре.

Это свойство определяет переход из текущего ключевого кадра в следующий. Обращаясь к нашему примеру, в ключевом кадре 0% animation-timing-function установлено в значение в ease-in:

Эта функция времени будет активна, когда анимация перейдет от 0% к следующему ключевому кадру с отметкой 50%. Более того, animation-timing-function, объявленная в ключевом кадре 50%, станет активной при переходе от 50% к 100%. С учетом того, что функция времени работает между текущим ключевым кадром и следующим, объявление временной функции в ключевом кадре 100% не имеет смысла.

Повторное использование ключевых кадров

И последнее, о чем я хочу поговорить, это использование одних и тех же ключевых кадров для объявления других анимаций. Я уже сетовал на то, что разрозненность объявления свойства animation от фактического правила @keyframes делает работу с анимацией немного неудобной. Но даже в неудобствах можно найти позитивные моменты, если сильно постараться.

Один из таких моментов – это возможность повторного использования одинаковых ключевых кадров для разных объявлений свойства animation. Может быть это трудно представить, поэтому давайте расширим наш текущий пример, чтобы осветить то, о чем я говорю.

В ваш текущий HTML документ, содержащий только одно покачивающееся облако, добавьте выделенные строки:

Как только вы добавили и выделенное правило стиля #smallCloud , и второй элемент img, сделайте предварительный просмотр страницы. Если все было сделано правильно, вы увидите два счастливо покачивающихся облачка, похожих на те, что вы видели в примере в начала этого урока.

Теперь, когда ваш пример работает, давайте посмотрим, как же нам это удалось. Хитрость заключается в объявлении animation в нашем правиле стиля #smallCloud :

Заметьте, что мы ссылаемся точно то же правило @keyframes по имени bobble. Единственным отличием между этим объявлением анимации и объявлением в правиле стиля #bigCloud является продолжительность. Продолжительность анимации, применяемой к маленькому облаку, – 4 секунды, в 2 раза больше, чем к большому облаку:

Это значит, что свойства, которые вы определили в ключевых кадрах bobble, будут применены к обоим нашим облакам. Разница только в том, что в одной анимации эти ключевые кадры воспроизводится в течение 2 секунд, а в другой – в течение 4 секунд:

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

Объявление нескольких анимаций

И последняя вещь (да-да, правда, последняя), которую мы по-быстрому разберем – как объявить несколько анимаций в одном свойстве animation. В сокращенной форме объявления мы просто перечисляем каждую анимацию через запятую, вот так:

Заметьте, что каждая анимация указывает на разное правило @keyframes . Если по какой-то причине вы решите указывать на одно и то же правило @keyframes из одного объявления свойства animation, то согласно порядку приоритетов в CSS, в силу вступит самое последнее объявление.

Объявляя анимацию в расширенной версии, вы бы сделали следующее:

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

Свойство animation в CSS – это очень важное свойство, о котором нужно знать больше, особенно, если вы хотите оживить ваш контент.

Данная публикация представляет собой перевод статьи « All About CSS Animations » , подготовленной дружной командой проекта Интернет-технологии.ру

CSS-анимации: Transitions и Animations. Motion Path Module CSS

До появления CSS3 при слове «анимация» верстальщиков бросало в холодный пот. А всё потому, что в те времена сделать качественную и красивую анимацию было не тривиальной задачей. CSS этого делать не умел, поэтому все анимации делались на JavaScript. Нужно было перелопатить кучу форумов, найти таких же товарищей по несчастью, потратить уйму времени на разработку, а в итоге услышать от дизайнера: «Ладно, сойдет и так». И когда наконец вышел CSS3, фейерверки не прекращались до утра, а шампанское лилось рекой. Это был знаменательный день для всех web-разработчиков (следующий такой день был, когда Microsoft объявила о прекращении поддержки Internet Explorer). С приходом CSS3 многие ранее сложные задачи превратились в простые и приятные для работы. Это же касается анимаций в CSS, о которых я расскажу в данной статье.

CSS transitions

CSS transitions позволяют сделать изменения CSS-свойств плавно и в течение некоторого времени. Таким образом, вы получаете возможность контролировать процесс перехода элемента от одного состояния к другому. Начнем с простейшего примера и продолжим дальше.

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

Теперь подробнее рассмотрим, как управлять переходами в CSS. У нас на вооружении есть всего 5 свойств, которые позволяют контролировать transition-анимацию:

  • transition-property;
  • transition-duration;
  • transition-timing-function;
  • transition-delay;
  • transition;

transition-property — указывает список свойств, которые будут анимироваться; свойства, которые здесь не указаны, будут изменяться обычным образом. Можно анимировать все свойства для конкретного элемента, указав значение all. Если вы не указали ни одного свойства, то по умолчанию используется значение all.

transition-duration — задаёт значение продолжительности анимации, время можно указывать в секундах или миллисекундах.

transition-timing-function — временная функция, указывает точки ускорения и замедления за определенный период времени для контроля изменения скорости анимации. Проще говоря, с помощью этого свойства можно указать поведение для анимации. Например, мы можем ускорить анимацию в начале и замедлить в конце, либо наоборот. Для того, чтобы задать процесс анимации используются кривые Безье. Вообще, transition-timing-function позволяет сделать очень много разных поведений для анимаций, это целая тема для статьи, поэтому здесь мы не будем углубляться.

transition-delay — задаёт задержку времени до начала анимации, можно указывать в секундах или миллисекундах.

transition — это общее свойство, которое позволяет перечислить первые четыре свойства в порядке: property, duration, timing-function, delay.

У нас получилась вот такая простая анимация: при наведении мышкой на квадрат изменяется ширина; продолжительность анимации одна секунда; анимация воспроизводится по линейной функции; задержка перед началом анимации 500 миллисекунд.

С помощью CSS transitions можно анимировать почти все свойства и создавать много интересных, красивых, функциональных и даже сложных анимаций, которые будут дополнять и улучшать ваш проект. Например, я сделал вот такой Material-FAB на чистом CSS, используя transitions:

CSS animations

CSS animations позволяют делать более сложные анимации, нежели CSS transitions. Весь секрет в @keyframes. Правило @keyframes позволяет создавать анимацию с помощью набора ключевых кадров, то есть описывает состояние объекта в определенный момент времени. Давайте рассмотрим простой пример.

Наш круг ожил и он как будто пульсирует.

Есть 9 свойств, которые позволяют контролировать CSS animations:

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

animation-name — здесь указвается имя анимации, которое связывает правило @keyframes с селектором.

animation-iteration-count — задаёт количество повторов анимации, значение по умолчанию 1. Значение infinite означает, что анимация будет проигрываться бесконечно.

animation-direction — задаёт направление анимации.

animation-play-state — данное свойство управляет остановкой и прогрыванием анимации. Есть два значения, running (анимация проигрывается, по умолчанию) и paused (останавливает анимацию).

animation-fill-mode — устанавливает, какие CSS-свойства будут приминены к объекту до или после анимации. Может принимать такие значения:

  • none — анимируемые CSS-свойства применятся к объекту только во время воспроизведения анимации, по окончании объект возвращается в исходное состояние;
  • forwards — анимируемые CSS-свойства применятся к объекту по окончании воспроизведения анимации;
  • backwards — анимируемые CSS-свойства применятся к объекту до начала воспроизведения анимации;
  • both — анимируемые CSS-свойства применятся к объекту и до начала, и после окончания воспроизведения анимации;

Свойства animation-duration, animation-timing-function, animation-delay работают так же, как аналогичные свойства в CSS transitions, о которых я писал раньше, поэтому не буду повторяться.

С помощью animations CSS можно создавать довольно сложные анимации без использования JavaScript. Яркий пример — это лоадеры, то есть элементы, которые показывают, что на вашей страничке что-то загружается. Вот несколько примеров:

Motion Path Module

Motion Path Module CSS позволяет создавать движение объектов по контуру через специальное свойство motion-path. Раньше такую анимацию можно было сделать только с помощью SVG или сложных скриптов.

В этой спецификаии есть 3 свойства:

motion-path — это свойство позволяет указать точки(координаты) по которым будет двигаться объект. Синтаксис такой же как у SVG-атрибута path.

motion-offset — это свойство приводит объект в движение от начальной точки до конечной. Оно принимает либо двойное значение длины, либо проценты. Чтобы объект начал двигаться, нужно определить анимацию, которая будет идти от 0 до 100%.

motion-rotation — это свойство позволяет указать, какой стороной вперед будет двигаться объект. Можно указать auto, reverse или свое значение в градусах (‘-45deg’, ’30deg’ и т.д).

К сожалению, motion-path пока что поддержывается только в Chrome и Opera, но будем надеяться, что остальные браузеры в скором времени возьмут с них пример, ведь штука действительно полезная.

Для тех, кто ещё не понял, как это работает, или хочет лучше с этим разобраться, я сделал пример (ссылка на codeopen).

SEO Маяк

Блог Виталия Кириллова | Все о создании,
продвижении сайтов и заработке в интернете

Создание и продвижение сайтов, заработок в интернете

CSS анимация — свойство animation

Всем привет! Сегодня на seo-mayak.com я расскажу и покажу, что такое CSS анимация.

На блоге уже есть одна статья, посвященная анимации — бегущая строка. Там мы заставляли двигаться текст с помощью чистого HTML, а точнее, с помощью тега marquee. Довольно интересный материал, советую почитать.

Сегодня же мы будем создавать анимацию средствами другого языка программирования, который называется CSS.

Для новичков скажу, что язык CSS (англ. Cascading Style Sheets, в переводе Каскадные Таблицы стилей) — это язык описания внешнего вида веб-страницы. Что это значит? А значит это то, что с помощью данного языка формируется внешний вид любого сайта.

Через CSS мы можем воздействовать на любой элемент страницы, будь-то текст или картинка, можем сдвинуть его в любом направлении или раскрасить в нужный цвет.

Потенциал CSS поистине безграничен, а с выходом CSS3 (третье поколение CSS) появилась возможность заставлять объекты двигаться в реальном времени, причем самым разнообразным образом.

В данной статье мы рассмотрим уникальное свойство CSS3 animation и правило @keyframes, но давайте обо все по-порядку. Поехали!

Основы CSS анимации

Кирпичиками CSS анимации являются: свойство animation и правило @keyframes.

@keyframes — уникальное правило CSS3, позволяющее задавать последовательные кадры анимации.

Свойство animation регулирует подачу анимации. Что я подразумеваю под словом «подача», Вы поймете немного позже.

Итак, снова бегущая строка:

Теперь давайте разберемся как работают свойство animation и правило @keyframes

Свойство animation можно разделить еще на несколько свойств:

animation-name — задает имя анимации;
animation-duration — задает длительность анимации в секундах (s) или миллисекундах (ms);
animation-timing-function — задает скоростные значения анимации;
animation-iteration-count — задает количество повторений анимации;
animation-direction — задает направление анимации;
animation-play-state — задает состояние анимации при наведении курсора;
animation-delay — задает время задержки перед началом анимации в s и ms;
animation-fill-mode — задаем положение элемента до и после анимации.

Чуть позже мы разберем каждое свойство во всех подробностях, а пока я лишь знакомлю Вас с основными инструментами.

Правило @keyframes

Как я уже говорил выше, правило @keyframes задает последовательные кадры анимации. Настало время объяснить, как работает данное правило.

name — имя анимации;
from — начальное состояние элемента;
to — конечное состояние элемента.

Но можно и по-другому:

А теперь давайте подробно разберем все свойства animation.

Семейство свойств animation

Для облегчения усвоения материала, после описания каждого свойства, я буду приводить наглядный пример.

Итак, берем текст, к примеру «Бегущаа строка» и в HTML прописываем для него класс:

Далее в файле style.css для созданного класса прописываем следующие свойства animation:

Ниже пишем правило анимации:

Прежде, чем я покажу, что получилось в итоге, давайте подробно разберем, что мы тут прописали.

animation-name: test; — мы задали имя анимации test;
animation-duration: 4s; — мы задали длительность анимации в 4 секунды;
animation-iteration-count: infinite; — интересное свойство, с помощью которого мы можем задать количество повторений анимации, (infinite — в переводе с англ. «бесконечный»). Также в этом свойстве можно задать цифровое значение повторений, например: 1 — одно повторение (значение по умолчанию), 2 — два повторения и т.д.

@keyframes test — здесь мы по имени test связываем правило анимации @keyframes с его свойствами animation.
from — задаем начальное положение строки в три пикселя от левого края страницы.
to — задаем конечное положение строки в шестьсот пикселей от левого края страницы.

В итоге получаем такой эффект:

Немного увеличим текст и добавим красок:

HTML

CSS

Теперь давайте более подробно рассмотрим еще одно свойство, которое имеет очень большое значение, так как отвечает за частоту движения объекта и может принимать несколько значений:

Свойство animation-timing-function

animation-timing-function: ease; — скольжение (значение по умолчанию) На примере выше мы не применяли свойство animation-timing-function, но на самом деле оно работало и значение у него было, как раз ease, поэтому и скорость не равномерная.

Свойство animation-timing-function может принимать несколько значений, пройдемся по каждому из них.

HTML

CSS

animation-timing-function: ease-in-out; — еще более плавное скольжение;

animation-timing-function: linear; — равномерная скорость движения;

animation-timing-function: ease-in; — ускорение к концу анимации;

animation-timing-function: ease-out; — ускорение в начале анимации;

animation-timing-function: cubic-bezier(.число число, .число число); — с помощью этого значения можно задать эффект разнонаправленности движению анимации:

cubic-bezier(.22, 1.47, .26, -0.49)

animation-timing-function: step-start; — это значение я хочу разобрать подробней, и показать Вам еще одно правило @keyframes:

HTML

CSS

Как видите правило @keyframes может принимать значение в %, что очень удобно при создании анимации. Так вот, с помощью step-start можно проигрывать заданные значения по шагам.

Если внимательно посмотреть на пример, то можно заметить, что при значении step-start пропускается первый шаг анимации.

animation-timing-function: step-end; — при значении step-end пропускается последний шаг анимации.

animation-timing-function: steps(число); — значение steps позволяет упростить пошаговую анимацию. В скобках можно просто прописать количество шагов, а в правиле @keyframes задать первый и последний шаг.

HTML

CSS

При применении значения steps последний шаг упускается.

С помощью вышеупомянутых значений свойства animation-timing-function можно довольно тонко настроит любую анимацию. Идем дальше.

Свойство аnimation-direction

Теперь мы рассмотрим еще одно интересное свойство, которое называется аnimation-direction и его возможные значения.

HTML

CSS

аnimation-direction:normal; — обычное движение строки слева направо.

animation-direction: reverse; — движение анимации из конца в начало.

animation-direction: alternate; — анимация проигрывается сначала в обычном режиме, а затем в обратном направлении.

animation-direction: alternate-reverse; — анимация начинается с конца, доходит до начала, а затем двигается в обратном направлении.

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

Свойство аnimation-delay

C помощью свойства Animation-delay мы можем задать задержку анимации перед началом воспроизведения в секундах или миллисекундах.

HTML

CSS

animation-delay: 0s; — значение по умолчанию.

animation-delay: 5s; — теперь давайте зададим задержку в 5 секунд.

animation-delay: -5s; — также можно задать отрицательное значение задержки воспроизведения.

Есть еще одно интересное свойство.

Свойство аnimation-fill-mode

Работу свойства аnimation-fill-mode можно наблюдать если использовать определенное количества циклов анимации, т.е. в свойстве animation-iteration-count надо задать цифровое значение.

Работа свойства заключается в определении ключевого кадра и воздействие на него, до или после начала анимации.

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

Илон Маск рекомендует:  Что такое код zip_entry_compressionmethod

HTML

CSS

animation-fill-mode: none; — свойство применяется к первому активному кадру.

animation-fill-mode: forwards; — свойство применяется к последнему активному кадру, т.е. после завершения воспроизведения, анимациа сохраниться на последнем кадре.

animation-fill-mode: backwards; — анимация применит значения для свойств из начального ключевого кадра, даже если кадр еще не активен.

animation-fill-mode: both; Это своего рода комплексное решение. Анимация применит значения к свойствам первого ключевого кадра в начале воспроизведения, и сохранит значения свойств последнего ключевого кадра после завершения анимации.

Осталось последнее свойство из семейства animation.


Свойство аnimation-play-state

Свойство может принимать всего два значения:

animation-play-state: running; — значение по умолчанию, воспроизведение анимации происходит в обычном режиме.

animation-play-state: paused; — остановка анимации на первом шаге.

В примере ниже я использовал способ остановки анимации в момент наведения курсора, с помощью псевдокласса :hover

HTML

CSS

Сокращенное написание свойств animation

Для упрощения верстки css кода, предусмотрено сокращенное написание всех свойств animation в одну строчку. Порядок или последовательность такая:

Надеюсь понятно, что название свойств надо заменить их значениями и конечно квадратные скобки прописывать не надо. Пример:

Также можно объединить несколько анимаций, перечисляя значения свойств через запятую:

Конечно, для каждого имени анимации должно быть прописано отдельное правило @keyframes.

Кроссбраузерность

Предполагаю, что прежде всего надо объяснить само понятие «Кроссбраузерность».

На заметку! Кроссбраузерность — корректность отображения сайта во всех популярных браузерах.

Сложного здесь ничего нет, просто для каждого браузера существуют определенные вендорные префиксы.

-webkit-animation: значения; — для браузеров: Chrome, Safari, iOS;
-moz-animation: значения; — для браузера Firefox;
-o-animation: значения; — для браузера Opera;
-ms-animation: значения; — для браузера Internet Explorer.

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

На самом деле бегущей строкой, да и одним свойством animation, CSS анимация не ограничивается и в будущем мы обязательно вернемся к этой теме, так что подписывайтесь на обновления блога .

Также в отдельной статье мы рассмотрим все возможные примеры CSS анимации.

С уважением, Виталий Кириллов

Анимация в CSS

Мы недавно видели, что переходы — это просто способ анимации стилевых свойств от исходного до конечного состояния.

Итак, переходы в CSS являются специфическим видом анимации, где:

  • есть только два состояния: начало и конец;
  • анимация не зациклена;
  • промежуточные состояния управляются только функцией времени.

Но что если вы хотите:

  • иметь контроль над промежуточными состояниями?
  • зациклить анимацию?
  • сделать разные виды анимаций для одного элемента?
  • анимировать определённое свойство только на половину пути?
  • имитировать различные функции времени для разных свойств?

Анимация в CSS позволяет всё это, и не только.

Анимация как мини-фильм, где вы в качестве режиссёра даёте инструкции (стилевые правила) вашим актёрам (элементам HTML) для разных сцен (ключевые кадры).

Свойства анимации

Как и transition , свойство animation является сокращённым для нескольких других:

  • animation-name : название анимации;
  • animation-duration : как долго длится анимация;
  • animation-timing-function : как вычисляются промежуточные состояния;
  • animation-delay : анимация начинается спустя некоторое время;
  • animation-iteration-count : сколько раз должна выполняться анимация;
  • animation-direction : должно движение идти в обратную сторону или нет;
  • animation-fill-mode : какие стили применяются до начала анимации и после её завершения.

Быстрый пример

Для оживления кнопки загрузки, вы можете написать анимацию подпрыгивания:

Сначала нужно написать реальную анимацию подпрыгивания с помощью @keyframes и назвать её bouncing . Затем вы можете использовать эту анимацию, применяя её к loading-button .

Я использовал сокращенное свойство animation и включил все возможные варианты:

  • animation-name: bouncing (совпадает с названием ключевых кадров)
  • animation-duration: 0.5s (полсекунды)
  • animation-timing-function: cubic-bezier(0.1,0.25,0.1,1)
  • animation-delay: 0s (без задержки)
  • animation-iteration-count: infinite (воспроизводится бесконечно)
  • animation-direction: alternate (идёт назад и вперёд)
  • animation-fill-mode: both

@keyframes

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

  • 0% — первый шаг анимации;
  • 50% — шаг на полпути в анимации;
  • 100% — последний шаг.

Можно также использовать ключевые слова from и to вместо 0% и 100%, соответственно.

Вы можете определить столько ключевых кадров, сколько хотите, вроде 33%, 4% или даже 29.86%. На практике вы будете писать только некоторые из них.

Каждый ключевой кадр является правилом CSS, это означает, что вы можете писать свойства CSS как обычно.

Чтобы определить анимацию, просто напишите ключевое слово @keyframes с его названием:

Обратите внимание, что начало 0% и конец 100% содержат одинаковые правила CSS. Это гарантирует, что анимация зациклится идеально. Поскольку счётчик итераций установлен как infinite , то анимация будет идти от 0% до 100%, а затем немедленно обратно к 0% и так бесконечно.

animation-name

Название анимации используется, по крайней мере, дважды:

  • при написании анимации с помощью @keframes ;
  • при использовании анимации с помощью свойства animation-name (или через сокращённое свойство animation ).

Подобно именам классов CSS, название анимации может включать в себя только:

Название не может начинаться с цифры или с двух дефисов.

animation-duration

Как и длительность перехода, длительность анимации может быть установлена в секундах (1s) или миллисекундах (200ms).

Значение по умолчанию равно 0s, что означает отсутствие анимации вообще.

animation-timing-function

Подобно функциям времени для переходов, функции времени для анимации могут использовать ключевые слова, такие как linear , ease-out или могут быть определены с помощью произвольных кривых Безье.

Значение по умолчанию: ease .

Поскольку анимация в CSS использует ключевые кадры, вы можете установить линейную функцию времени и моделировать конкретную кривую Безье, определяя множество очень специфичных ключевых кадров. Посмотрите Bounce.js для создания передовой анимации.

animation-delay

Как и с задержкой перехода, задержка анимации может быть установлена в секундах (1s) или миллисекундах (200ms).

По умолчанию равно 0s, что означает отсутствие любой задержки.

Полезно использовать, когда включается несколько анимаций в серии.

animation-iteration-count

По умолчанию, анимация воспроизводится только один раз (значение 1). Вы можете установить три типа значений:

  • целые числа, вроде 2 или 3;
  • дробные числа, вроде 0.5, которые будут воспроизводить только половину анимации;
  • ключевое слово infinite , которое будет повторять анимацию бесконечно.

animation-direction

Свойство animation-direction определяет, в каком порядке читаются ключевые кадры.

  • normal : начинается с 0%, заканчивается на 100%, начинается с 0% снова.
  • reverse : начинается со 100%, заканчивается на 0%, начинается со 100% снова.
  • alternate : начинается с 0%, идёт до 100%, возвращается на 0%.
  • alternate-reverse : начинается со 100%, идёт до 0%, возвращается на 100%.

Это легче представить, если счётчик итераций анимации установлен как infinite .

animation-fill-mode

Свойство animation-fill-mode определяет, что происходит перед началом анимации и после её завершения.

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

animation-fill-mode позволяет сообщить браузеру, если стили анимации также должны применяться за пределами анимации.

Давайте представим себе кнопку, которая является:

Знакомство с анимацией в CSS3: гайд для начинающих

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

Чтобы использовать анимацию в проекте, нужно сделать две вещи:

  1. Создать анимацию.
  2. Связать её с анимируемым элементом и указать нужные свойства.

Анимация — это набор ключевых кадров, или кейфреймов, хранящихся в CSS:

Давайте разберём, что здесь происходит. Ключевое слово @keyframes обозначает саму анимацию. Затем идёт имя анимации, в нашем случае — test-animation . В фигурных скобках содержится список кейфреймов. Мы используем начальный кадр 0% и конечный 100% (их также можно записать как from и to ).

Взгляните на код ниже. Анимацию можно задать и так:

Учтите, что, если начальный или конечный кадры не указаны, браузер определит их автоматически так, будто к ним не была применена анимация.

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

12–13 ноября, Санкт-Петербург, беcплатно

Подключить анимацию к элементу можно так:

Свойство animation-name задаёт имя для анимации @keyframes . Правило animation-duration задаёт длительность анимации в секундах ( 3s , 65s , .4s ) или миллисекундах ( 300ms , 1000ms ).

Вы можете группировать кейфреймы:

К одному элементу можно применить несколько анимаций. Их имена и параметры должны быть записаны в порядке применения:

Задержка анимации

Свойство `animation-delay` задаёт задержку перед воспроизведением анимации в секундах или миллисекундах:

Повторное воспроизведение анимации

При помощи свойства `animation-iteration-count` можно указать число повторов анимации: 0, 1, 2, 3, … — или `infinite` для зацикливания:

Состояние элемента до и после анимации

Свойство `animation-fill-mode` указывает, в каком состоянии элемент будет находиться до начала анимации и после её завершения:

  • `animation-fill-mode: forwards;` — после завершения анимации элемент будет находиться в состоянии последнего кейфрейма;
  • `animation-fill-mode: backwards;` — после завершения анимации элемент будет находиться в состоянии первого кейфрейма;
  • `animation-fill-mode: both;` — перед началом анимации элемент будет находиться в состоянии первого кейфрейма, после завершения — в состоянии последнего.

В примере ниже к трём элементами применяется одна и та же анимация, различается лишь значение `animation-fill-mode`:

Запуск и остановка анимации

За это отвечает свойство `animation-play-state`, которое может принимать два значения: `running` или `paused`. Тут всё просто ��

Направление анимации

Используя свойство `animation-direction`, мы можем управлять направлением воспроизведения анимации. Вот возможные значения:

  • `animation-direction: normal;` — анимация воспроизводится в прямом порядке, как обычно;
  • `animation-direction: reverse;` — анимация воспроизводится в обратном порядке, от `to` к`from`;
  • `animation-direction: alternate;` — чётные повторы анимации воспроизводятся в обратном порядке, нечётные — в прямом;
  • `animation-direction: alternate-reverse;` — нечётные повторы анимации воспроизводятся в обратном порядке, чётные — в прямом.

Функция плавности вывода анимируемых кадров

Свойство `animation-timing-function` позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. Стоит учесть, что по умолчанию анимация начинается медленно, разгоняется быстро и замедляется в конце. Сейчас существуют следующие предопределённые значения: `ease`, `ease-in`, `ease-out`, `ease-in-out`, `linear`, `step-start`, `step-end.`

Однако вы можете создавать такие функции самостоятельно. Значение `animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y);` принимает на вход 4 аргумента и строит кривую распределения процесса анимации. Попрактиковаться в создании этих функций можно cubic-bezier.com и matthewlein.com.

И, наконец, анимацию можно разбить на набор дискретных значений при помощи функции `steps (amount of steps, direction)`, которая принимает на вход количество шагов и направление (`start` или `end`). В следующем примере анимация состоит из 7 шагов, последний из которых произойдёт прямо перед завершением анимации:

Совместимость с браузерами

CSS-анимация хорошо поддерживается браузерами. С актуальной информацией можно ознакомиться, взглянув на эту таблицу:

Can I Use css-animation? Data on support for the css-animation feature across the major browsers from caniuse.com.

Материалы для дальнейшего изучения

  • animate.css — самая популярная библиотека для работы с анимациями;
  • effeckt.css — ещё одна известная библиотека;
  • интерактивная шпаргалка;
  • подробнейшая документация от Mozilla;
  • bounce.js — библиотека для создания классных эффектов.

Также в изучении анимации вам поможет этот англоязычный курс:

Вот и всё! Возможно, какие-то моменты мы не разобрали, но при помощи материалов, указанных выше, вы сможете сделать это самостоятельно. Успехов в дальнейшем изучении веб-разработки!

Плавная анимация объектов только с помощью CSS (5 примеров)

Здравствуйте, дорогие читатели блога. В этот день давайте поговорим о, довольно таки, интересной штуке как CSS анимация. То есть, эта анимация элементов делается только с помощью стилей и никакие скрипты тут не используются.

Возможно, когда то CSS анимация заменит всякие скрипты и JQuery плагины, но это будет далеко как не скоро, потому что ещё очень ограниченные возможности, а у JQuery скриптов они безграничны.

Единственный минус в том, что некоторые старые (не обновлённые) браузеры данный способ не поддерживают, а за ИЕ (Internet Explorer) я вообще молчу. Но в общем данная анимация в самых популярных браузерах работает на ура, тем более если используются специальные префиксы.

Кстати о префиксах, мы их будем использовать во всех примерах, так сказать, нужно страховаться:

  • -o- — для браузера Опера;
  • -moz- — для Firefox;
  • -webkit- — для Google Chrome и Safari.

Ну а теперь давайте всё рассмотрим подробнее.

В данном случае мы будем создавать самый обычный блок с разрешением 200 на 100 пикселей, а потом уже прикреплять к нему анимацию.

Обычный блок

HTML

Чтобы добавить такой блок на страницу, нужно просто добавить

CSS

#box <
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;

border: 1px solid #888;
cursor: pointer;
>

Как видите здесь присутствует атрибут :hover, который меняет стиль фона при наведении, в некоторых примерах он должен быть обязательно.

Плавное изменение цвета элемента при наведении с помощью transition

CSS

padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: background-color 0.8s 0.1s ease;
-o-transition: background-color 0.8s 0.1s ease;
-webkit-transition: background-color 0.8s 0.1s ease;
cursor: pointer;>

#box1:hover <
background-color: #97CE68;
color: #333;
>

Как видите такую анимацию мы добились с помощью атрибута transition. Здесь можно изменить скорость анимации в секундах, в данном случае стоит 0.8с до полного изменения цвета при наведении и 0.1с до того как сработает анимация после наведения и убирания курсора. (Извиняюсь за ребус :-) ) Это значение можно изменять как Вам нужно.

Цвет фона при наведении ставится атрибутом :hover, он здесь обязательный, иначе анимация работать не будет.

Изменение размера элемента

CSS

padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
cursor: pointer;>

#box2:hover <
background-color: #97CE68;
color: #000;
width: 150px;
height:50px;
>

В этом примере мы добились плавного изменения размера блока при наведении. Стандартная величина 200 на 100, а величина при наведении составляет 150 на 50, которая задаётся атрибутом :hover.

Ещё здесь можно изменить блок только по ширине или по высоте, нужно просто под :hover удалить width: — блок изменяется только по высоте, height: — блок изменяется только по ширине.

Также можно изменить скорость изменения. В данном случае это 1с.

Кручение объекта

CSS

padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 1s 0.1s ease-in;
-o-transition: all 1s 0.1s ease-in;
-webkit-transition: all 1s 0.1s ease-in;
cursor: pointer;>

#box3:hover <
background-color: #97CE68;
color: #000;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
>

Кручение происходит с помощью transform и transition. В данном случае объект крутится по часовой стрелке на 360 градусов со скоростью в одну секунду. Если нужно, чтобы блок крутился против часовой стрелки, в transform значении нужно поставить -(минус). Естественно градус оборота можно изменять.

Плавное увеличение и уменьшение объекта

CSS

#box4 <
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
-webkit-transition: all 3s ease-out;
cursor: pointer;>

#box4:hover <
background-color: #97CE68;
color: #000;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
>

В этом примере блок плавно увеличивается в 2 раза. Это значение выставляется transform: scale(2). Если поставить значение 1.5, соответственно увеличение блока будет в 1.5 раза.

Этим же способом можно уменьшить размер блока, например поставить значение 0.5.

Плавное смещение блока вниз

CSS

#box5 <
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;

text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
cursor: pointer;>

#box5:hover <
background-color: #97CE68;
color: #000;
-webkit-transform: translate(0,50px);
-moz-transform: translate(0,50px);
-o-transform: translate(0,50px);
>

Здесь перемещение задаётся в пикселах. В данном случае (0,50px). Так же можно заставить блок подниматься вверх этим значением 0,-50px. Или по диагонали вниз 50px,50px. Одним словом блок можно заставить смещаться куда угодно.

Вот в принципе и всё, что хотелось сказать. Нет, не всё :-) Забыл напомнить о том, что эту CSS анимацию можно применять к любым объектам на сайте: к картинкам, тексту, заголовкам, иконкам и т.д. Вот для ссылок отлично подойдет плавное изменение цвета, по моему очень красиво. :-)

И ещё, этой информацией поделился с нами сайт shpargalkablog.ru. За что ему огромное спасибо.

Вот теперь точно все :-) До скорых встреч, друзья.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL