animation-name в CSS


Содержание

CSS animation-name

The CSS animation-name property defines a list of animations that apply. Each name is used to select the @keyframes at-rule that provides the property values for the animation.

Syntax

Possible Values

The name of the @keyframes at-rule that provides the property values for the animation. If the name does not match any keyframe at-rule, there are no properties to be animated and the animation is not executed.

Setting this property to none explicitly disables animations. So, if this property contains the value of none , no animation is executed even if there is a keyframe at-rule with that name. The default value is «».

In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:

initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.

Basic Property Information

Example Code

Basic CSS

Working Example within an HTML Document

CSS Specifications

  • This property is defined in CSS Animations Level 1 (Editor’s Draft)

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.

Vendor Prefixes

For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.

This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.

The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.

Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.

You can also use Autoprefixer with preprocessors such as Less and Sass.

Свойство animation-name

Свойство animation-name задает имя анимации, при обращении к которому будет производиться анимация (можно указать несколько через запятую).

Имя анимации и список анимированных переходов для этого имени задается пользователем.

Допустимые значения

  • none — анимации не будет
  • — имя анимации, задающееся пользователем, которое определяется в том же документе.

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

Значение по умолчанию none
Применимо к блочным и строчным элементам
Наследование нет
Версия CSS CSS 3
Поддерживается браузерами

Пример

Твой код:
Результат:

Заметки

Это свойство относится к модулю CSS Animations Module Level 3 находящемся в разработке W3C, поэтому в нем возможны дополнения.

Safari 4.0 и выше Chrome 3.0 и выше поддерживают аналогичное свойство -webkit-animation-name, а также поддерживают возможность определить список анимаций с помощью ключевого слова @-webkit-keyframes.

CSS свойство animation-name

Свойство animation-name определяет список имен анимаций, которые должны быть применены к выбранному элементу.

Каждое имя указывает набор ключевых кадров, определенных в соответствующем правиле @keyframes.

Примечание: Обычно удобнее использовать свойство animation, которое позволяет задавать сразу все свойства для анимации в одном объявлении.

CSS синтаксис

Возможные значения

Значение Описание
идентификатор Указывает имя набора ключевых кадров @keyframes.
none Значение по умолчанию. Указывает, что анимация отсутствует. Может использоваться для отключения анимации, пришедшей по каскаду.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример

Устанавливаем для анимации элемента имя набора ключевых кадров

CSS3 — анимация

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript. Анимация применяется к любым html-элементам, а также к псевдоэлементам :before и :after

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

Чтобы воспользоваться анимацией в своём проекте, вам достаточно сделать две вещи:

  1. Создать саму анимацию c помощью ключевого слова @keyframes
  2. Подключить её к элементу, который надо анимировать, и указать нужные свойства.

Правило @keyframes

Правило @keyframes позволяет создавать анимацию с помощью ключевых кадров — состояний объекта в определенный момент времени.

Ключевые кадры анимации создаются с помощью ключевых слов from и to (эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты.

Если не задан начальный ( from , 0%) или конечный ( to , 100%) кадр, браузер установит для них расчётные значения анимируемых свойств такими, какими они были бы если бы не была применена анимация.

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

При определении анимации сразу после свойства @keyframes должно следовать имя данной анимации (данное имя затем должно быть указано в свойстве animation элемента, который будет анимирован).

Мы создали анимацию, которая работает следующим образом:

  1. Начало анимации ( from можно было написать 0%) — положение элемента по оси Х равно 0px;
  2. Середина анимации (50%) — положение элемента по оси Х равно 130px;
  3. Конец анимации ( to мы использовали 100%) — возвращаем элемент на начало анимации, т.е. положение элемента по оси Х равно 0px;

See the Pen ONgOQY by Aleksei (@AmateR) on CodePen.0

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

Ключевые кадры можно группировать:

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

Подключение анимации к элементу происходит двумя командами — animation-name и animation-duration .

Название анимации

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

Длительность анимации

Свойство устанавливает длительность анимации, например: animation-duration: 1s;. Его можно указывать в секундах (3s, 65s, .4s) или в миллисекундах (300ms, 1000ms). Не наследуется.

Временная функция

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

Однако такие функции можно создавать самому. Специальная функция cubic-bezier (P1x, P1y, P2x, P2y); принимает четыре аргумента и строит на их основе кривую распределения значений в процессе анимации. Потренироваться в создании своих функций и посмотреть как они работают можно на этом сайте.

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

  • ease — функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
  • linear — анимация происходит равномерно на протяжении всего времени, без колебаний в скорости; соответствует cubic-bezier(0,0,1,1).
  • ease-in — анимация начинается медленно, а затем плавно ускоряется в конце; соответствует cubic-bezier(0.42,0,1,1).
  • ease-out — анимация начинается быстро и плавно замедляется в конце; соответствует cubic-bezier(0,0,0.58,1).
  • ease-in-out — анимация медленно начинается и медленно заканчивается; соответствует cubic-bezier(0.42,0,0.58,1).
  • cubic-bezier(x1, y1, x2, y2) — см.выше.
  • inherit — наследует это свойство от родительского элемента.

See the Pen VaWyjN by Aleksei (@AmateR) on CodePen.0

Анимация с задержкой

Свойство animation-delay определяет задержку до начала воспроизведения анимации, задаётся в секундах или миллисекундах. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Если вы хотите, чтобы анимация началась с середины, задайте отрицательную задержку, равную половине времени, установленном в animation-duration . Не наследуется.

Простая 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, как работать с ключевыми кадрами, и как « дергать за веревочки » те свойства, которые связанны с анимацией, чтобы заставить вашу анимацию делать в точности то, что вы хотите.

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

Самый простой (и самый веселый) способ узнать о 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 » , подготовленной дружной командой проекта Интернет-технологии.ру

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 секунд, но чтобы посмотреть, как работает данное свойство, придется перезагрузить страницу.

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

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

animation-name

The animation-name property is used to specify one or more names of animations defined by @keyframes rules, that are to be applied to the selected element.

A @keyframes rule specifies the property values that are to be animated over a sequence of animation keyframes.

You can specify either one animation name in animation-name or a list of comma-separated names. Each name belongs to a @keyframes identifier. If the animation name specified using animation-name does not exist, no animation is applied.

When you provide a list of comma-separated animation names, this list is usually mapped to a list of values provided by other animation-related properties, such as the animation-delay , animation-timing-function , and animation-duration properties, among others. Each list of values in these properties is treated kind of like an array, where each value in a list of values has its own index. Then, each value in a list of values is mapped to its corresponding value with the same index in the list provided in the other properties.

The animation-name property is usually set as part of the animation shorthand property.

The animation applied to an element can be controlled using the different animation properties, including how many times the animation iterates, whether or not it alternates between the begin and end values, and whether or not the animation should be running or paused. An animation can also delay its start time.

Official Syntax

  • Syntax:
  • Initial: none
  • Applies To: all elements; and ::before and ::after pseudo-elements
  • Animatable: no
  • Values

    Examples

    The following are all valid animation-name values:

    The following applies an animation to an element and controls it using other animation properties. The animation name matches the name of an animation defined using an @keyframes rule. The .box element will not be animated because, in this code, there is no animation that matches the animation name provided in the animation-name property. The .animated element will have two animations applied to it, each with a specified duration.

    Live Demo

    In the following demo, two animations are defined using two @keyframes rules. One of these animations is applied to the element. Play with the code and apply the second animation to it to see how it affects the element.

    Browser Support

    CSS Animation

    Complex method of animating certain properties of an element

    CSS-анимации

    Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

    Более новая информация по этой теме находится на странице https://learn.javascript.ru/css-animations.

    Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.

    Однако, как мы увидим далее, для более тонкого контроля анимации JavaScript вовсе не будет лишним.

    CSS transitions

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

    Например, CSS, представленный ниже, 3 секунды анимирует свойство background-color .

    Теперь любое изменение фонового цвета будет анимироваться в течение 3х секунд.

    При клике на эту кнопку происходит анимация её фона:

    Есть всего 5 свойств, задающих анимацию:

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

    Далее мы изучим их все, пока лишь заметим, что общее свойство transition может перечислять их все, в порядке: property duration timing-function delay , а также задавать анимацию нескольких свойств сразу.

    Например, при клике на эту кнопку анимируются одновременно цвет и размер шрифта:

    Далее мы рассмотрим свойства анимации по отдельности.

    transition-property

    Список свойств, которые будут анимироваться, например: left , margin-left , height , color .

    Анимировать можно не все свойства, но многие. Значение all означает «анимировать все свойства».

    transition-duration

    Продолжительность анимации, задаётся в формате CSS time, то есть в секундах s или ms .

    transition-delay

    Задержка до анимации. Например, если transition-delay: 1s , то анимация начнётся через 1 секунду после смены свойства.

    Возможны отрицательные значения, при этом анимация начнётся с середины.

    Например, вот анимация цифр от 0 до 9 :

    Она осуществляется сменой margin-left у элемента с цифрами, примерно так:

    В примере выше JavaScript просто добавляет элементу класс – и анимация стартует:

    Можно стартовать её «с середины», с нужной цифры, например соответствующей текущей секунде, при помощи отрицательного transition-delay .

    В примере ниже при клике на цифру она начнёт двигаться с текущей секунды:

    В JavaScript это делается дополнительной строкой:

    transition-timing-function

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

    Самое сложное, но при небольшом изучении – вполне очевидное свойство.

    У него есть два основных вида значения: кривая Безье и по шагам. Начнём с первого.

    Кривая Безье

    В качестве временной функции можно выбрать любую кривую Безье с 4 опорными точками, удовлетворяющую условиям:

    1. Начальная точка (0,0) .
    2. Конечная точка (1,1) .
    3. Для промежуточных точек значения x должны быть в интервале 0..1 , y – любыми.

    Синтаксис для задания кривой Безье в CSS: cubic-bezier(x2, y2, x3, y3) . В нём указываются координаты только двух точек: второй и третьей, так как первая и последняя фиксированы.

    Она указывает, как быстро развивается процесс анимации во времени.

    • По оси x идёт время: 0 – начальный момент, 1 – конец времени transition-duration .
    • По оси y – завершённость процесса: 0 – начальное значение анимируемого свойства, 1 – конечное.

    Самый простой вариант – это когда процесс развивается равномерно, «линейно» по времени. Это можно задать кривой Безье cubic-bezier(0, 0, 1, 1) .

    График этой «кривой» таков:

    …Как видно, это просто прямая. По мере того, как проходит время x , завершённость анимации y равномерно приближается от 0 к 1 .

    Поезд в примере ниже с постоянной скоростью «едет» слева направо, используя такую временную функцию:

    свойство animation-nameCSS3-генератор ☛

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

    Краткая информация

    Значение по умолчанию none
    Наследуется Нет
    Применяется Ко всем элементам, к псевдоэлементам ::before и ::after
    Анимируется Нет

    Синтаксис ?

    Обозначения

    Описание Пример
    Указывает тип значения.
    A && B Значения должны выводиться в указанном порядке. &&
    A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
    A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
    [ ] Группирует значения. [ crop || cross ]
    * Повторять ноль или больше раз. [, ]*
    + Повторять один или больше раз. +
    ? Указанный тип, слово или группа не является обязательным. inset?
    Повторять не менее A, но не более B раз.
    # Повторять один или больше раз через запятую. #

    Значения

    Пример

    Объектная модель

    Примечание

    Chrome, Safari и Andro >-webkit-animation-name .

    Opera до версии 12.10 поддерживает свойство -o-animation-name .

    Firefox до версии 16 поддерживает свойство -moz-animation-name .

    Спецификация ?

    Спецификация Статус
    CSS Animations Рабочий проект

    Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
    • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
    • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

    Браузеры: Настольные Мобильные ?

    Internet Explorer Chrome Opera Safari Firefox
    10 3 12 12.10 4 5 16
    Android Firefox Mobile Opera Mobile Safari Mobile
    2 5 16 12 12.10 4

    Браузеры

    В таблице браузеров применяются следующие обозначения.

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

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

    Илон Маск рекомендует:  Реализация всех экспортируемых функций
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL