Какие параметры анимации нужно указывать обязательно чтобы анимация заработала

Виды анимации на верстке: свойства, особенности, примеры кода

Frontend-разработчик нашей компании Данила Абрамов рассказывает, как оптимизировать анимации и делать их плавными. В статье разберем CSS Transition, CSS Animation, SVG animation, JS-Анимацию, JS canvas и JS. WebGL / ThreeJs.

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

Виды анимаций

Самые простые и распространённые виды анимаций — CSS Transition и CSS Animation.

CSS Transition

Transition — это сокращённое CSS-свойство, которое позволяет управлять плавным переходом между двумя состояниями элемента.

Свойство Transition состоит из:

• transition-property — название свойства, к которому применяется эффект перехода.
• transition-duration — длительность перехода.
• transition-timing-function — временную функцию перехода (то, как будут определены промежуточные значения для свойства, которое участвует в переходе).
• transition-delay — задержку перед началом перехода.

button:hover

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

Разбор аниматора UNITY [Прерывания| Blend Tree| Слои анимации]

Минусы: transition не позволяет изменять свойства элемента, если состояний больше, чем два. Также невозможно делать бесконечные анимации.

Особенности: в значении свойства transition можно указывать как отдельные CSS-свойства со своими значениями, так и использовать ключевое слово all. Оно скажет браузеру использовать переход для всех свойств, которые есть внутри CSS-правила.

CSS Animation

Animation — сокращённое CSS-свойство, включающее в себя:

• animation-name — название.
• animation-duration — длительность.
• animation-timing-function — временную функцию (по аналогии с transition-timing-function).
• animation-delay — задержку перед началом.
• animation-iteration-count — количество повторений.
• animation-direction — направление (можно запустить анимацию наоборот, начиная с конца).
• animation-fill-mode — то, как будут применяться стили ключевых кадров до и после окончания анимации.
• animation-play-state — свойство, которое позволяет поставить анимацию на паузу и продолжить с того места, на котором она остановилась.

Для того, чтобы использовать эту анимацию, достаточно добавить к элементу свойство animation с названием анимации и её опциями:

element.is-animated < animation: shift 1700ms linear 1000ms infinite;

В следующем простом примере при клике на элемент в JS добавляется и удаляется класс .is-animated, что включает и выключает анимацию

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

Все о CSS переходах (transitions) за 16 минут. CSS анимация. Часть первая.

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

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

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

SVG animation

SVG можно анимировать двумя способами: с помощью CSS-анимации SMIL-анимации.

• если в SVG что-то не получилось анимировать с помощью CSS-анимации,
• или нужно устанавливать зависимости между разными анимациями (например, запустить вторую анимацию через 3 секунды после того, как закончится первая анимация),
• либо нужно плавно превратить один вид SVG в другой, во всех этих (и некоторых других) случаях необходимо использовать SMIL-анимацию для SVG.

Так выглядит простая SMIL-анимация движения круга по клику мышки:

1) Анимация SMIL + CSS. На CSS анимируется изменение цвета и перемещение фигуры, с помощью SMIL фигура изменяет свой контур.

2) Здесь анимация полностью сделана с помощью SMIL

3) Ещё один пример морфинга (изменение контура SVG)

Плюсы:

• SMIL анимация будет работать даже если вам нужно вставить SVG с помощью тега img, либо через background-image в CSS.
• С помощью SMIL анимации можно анимировать те атрибуты, которые не доступны для CSS-анимации. Например, анимировать точки в теге , чтоб создать эффект плавного перехода от одной фигуры к другой.

Минусы: По сути SMIL-анимация — это отдельная спецификация со своими правилами и тонкостями, которую необходимо изучать отдельно от CSS.

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

JS-Анимация

Говоря простым языком, это плавное изменение стилей элемента через JavaScript. С помощью JS анимации можно контролировать все стили элемента на любом этапе анимации, менять их в зависимости от любых условий. С помощью чистого JS делаются анимации переключения слайдов, раскрытие-закрытие аккордеона, различные перемещения блоков по определённым условиям, и многое многое другое.

1) Довольно необычный слайдер

2) Анимация эффекта при движении мышкой

Плюсы: Анимация с помощью JavaScript позволяет сделать то, на что не способна CSS-анимация. Можно как угодно манипулировать элементами. Также в любом месте анимации её можно замедлять, приостанавливать, и т.п.

Минусы: JS-анимация часто более ресурсозатратна для браузеров.

Особенности:

• если написать JS-анимацию неправильно, то есть большой шанс, что на слабых устройствах она будет тормозить. Как этого избежать поговорим ниже.
• для JS-анимаций есть большое количество готовых библиотек (например, anime.js), которые позволяют создавать анимации быстрее и эффективнее (особенно сложные), нежели писать их руками.

JS canvas

Canvas — это холст. То есть всего лишь один тег в html-коде. При создании анимации внутри canvas все изменения происходят внутри одного тега. Всё, что находится внутри canvas, не существует в DOM-дереве. Но с помощью JS мы можем создавать, перемещать и изменять любые элементы, которые будут находиться в canvas.

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

Минусы: как и все предыдущие виды анимаций, canvas позволяет реализовать только 2D-графику.

1) Анимация снегопада

2) Игра змейка на canvas

JS. WebGL / ThreeJs

WebGL — технология, которая добавляет в браузер 3D-графику. Самая популярная библиотека для работы с WebGL (на данный момент) — three.js. Она существенно упрощает порог вхождения в технологию WebGL. Благодаря поддержке 3d, с помощью three.js часто делаются браузерные 3d игры.

• На этом сайте приведены примеры игр, созданных с помощью three.js
• Земля (шар), на которой есть интерактивные точки. При нажатии на точки открываются описания.

Плюсы: это единственная возможность создавать полноценную 3D-анимацию в браузере.

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

Как работают анимации в браузере

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

Вот 5 основных этапов, которые проходит браузер во время анимации:

1) JavaScript. Браузер смотрит влияние JavaScript на стили на странице.

2) Style. Из CSS для каждого элемента рассчитываются стили, которые отвечают за внешний вид (размеры, отступы, цвета).

3) Layout. Браузер рассчитывает местоположение каждого элемента относительно друг друга. А также как они влияют друг на друга.

На всех этих этапах браузер не отрисовывает элементы. Он всего лишь считывает их характеристики.

4) Paint. На данном этапе уже прорисовываются все элементы. Каждый пиксель каждого элемента.

5) Composite. Происходит проверка, какой элемент на какой наложился сверху. Например, снизу фон, а поверх него остальные элементы.

Все 5 этапов проходят по умолчанию при загрузке страницы.

Во время анимации в браузере могут быть три варианта:

• Все эти 5 этапов проходят тогда, когда мы изменяем CSS-свойства, которые рассчитываются на процессоре (CPU) и влияют на размеры элемента, его местоположение, внешние и внутренние отступы. Это худший вариант.

• Если мы изменяем свойства, которые не влияют на расположение элемента (фон, тени, цвет, и т. п.), то браузер проходит 4 этапа — 1, 2, 4, 5 (без третьего, одного из самых затратных, — этапа Layout).
• Лучшим вариантом анимаций с точки зрения работы браузера будет вариант, когда мы проходим только 1, 2, и 5 этап. (без этапов Layout и Paint). Это возможно, если использовать свойства opacity и transform. opacity — это просто прозрачность, а transform фиксирует область за элементом, и для него перестаёт просчитываться взаимодействие с другими элементами. Это позволяет не перерисовывать всю страницу.

Основные правила для успешной работы анимаций

Самая сложная и важная часть веб-анимации — добиться её плавности. То есть сделать так, чтоб количество кадров анимации приблизилось к 60 fps. Существует множество факторов, которые влияют на плавность анимации — это и мощность устройства, и размеры экрана, и количество пикселей на экране, и многое другое.

Приведу несколько способов оптимизации анимаций.

• С transition лучше не использовать ключевое слово all, а задавать конкретные свойства, поскольку в CSS-правиле в дальнейшем могут добавиться другие свойства, переход между которыми нам не нужен. Также, когда используется ключевое all, браузер проходит по всем свойствам в CSS-правиле, определяя, какие можно анимировать, а какие нет. Это создаёт лишнюю нагрузку, что незначительно, но всё же влияет на быстродействие анимации.

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

• Выносить анимированные элементы на отдельный слой, чтобы анимация происходила за с помощью видеокарты. (transform: translateZ(0); или transform: translate3d(0, 0, 0); )

• использовать свойство will-change, которое заранее говорит браузеру о тех свойствах, которые будут анимированы. При этом браузер оптимизирует анимацию, и, если нужно, то переносит рендеринг видеокарту. (Не следует использовать для простой анимации, чтоб не путать браузер на что нужно, а на что не стоит тратить особенное внимание).

• Если элемент визуально отсутствует на странице после или до анимации, то необходимо его скрыть с помощью display: none или visibility: hidden, для того, чтоб освободить ресурсы браузера. Это полностью выключит считывание событий и считывание анимаций.

• Если анимаций много, то лучше запускать их последовательно. Лучше для этого не использовать delay, потому что это равнозначно одновременному запуску нескольких анимаций, что съедает ресурсы.

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

• Если используем JS-анимацию, то обязательно нужно использовать функцию window.requestAnimationFrame(). В коде это выглядит так:

function step() < // код функции, который анимирует элемент window.requestAnimationFrame(step); >window.requestAnimationFrame(step);

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

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

Итог

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

За счёт каких ресурсов компьютера будет исполняться код (CPU или GPU). По возможности не стоит переусложнять анимацию. Чем проще анимация, тем она производительнее. Анимация должна быть украшением, но никак не мешать пользователям пользоваться сайтом или приложением.

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

• анимация
• анимация скролла
• анимация фрагментов
• анимация прототипов

Источник: habr.com

CSS-анимация: специфика, виды, правила создания и примеры

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

Искать примеры готовой CSS-анимации — дело нехитрое.

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

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

CSS3-анимация

CSS3-анимация применима практически для всех HTML-элементов, включая псевдоэлементы «:before» и «:after». Однак о н ужно помнить одну вещь — каждый анимационный элемент является дополнительной нагрузкой для браузера, поэтому не нужно превышать разумное количество анимации, чтобы ваш веб-сайт загружался быстро, а не зависал от обилия анимации.

Свойство «animation»

• padding-top;
• padding-right;
• padding-bottom;
• padding-left.

Animation-name

Animation-duration

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

Animation-iteration-count

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

Animation-timing-function

• ease — анимация медленно стартует, потом набирает разгон и замедляет ход к концу;
• ease-in — медленно стартует и набирает ход к концу;
• ease-out — быстро стартует и замедляет ход к концу;
• ease-in-out — медленно стартует и медленно заканчивается;
• cubic-bezier() — дает возможность устанавливать скорость воспроизведения анимации «вручную»;
• и др.

Animation-direction

В нашем примере не указан этот аргумент. Регламентирует направление воспроизведения анимации. То ест ь з десь можно указать, чтобы анимация воспроизводилась в обратном порядке. По умолчанию значение этого свойств а проигрывает анимацию в одном направлении. Если нужно обратное проигрывание, тогда указывается значение «reverse».

Animation-play-state

Это свойство у нас не указано. Оно определяет возможность временно приостановить анимацию до наступления какого-то события. Часто применяется совместно со скриптами JavaScript либо с состоянием «:hover», которое применяется для определения свойств при наведении курсора на элемент.

Значение для приостановки анимации — «paused». Важно отметить, что остановленная анимация начинает свое воспроизведение с того момента, на котором она остановилась, а не с самого начала.

Animation-delay

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

Заключение

• в свойствах элемента, который вы хотите анимировать , обязательно нужно указать параметры «animation-name» и «animation-duration» — без них она не сработает;

Мы будем очень благодарны

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

Источник: codernet.ru

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

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

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

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

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

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

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

Bouncing Clouds #mainContent < background-color: #A2BFCE; border-radius: 4px; padding: 10px; width: 600px; height: 300px; overflow: hidden; >.cloud < position: absolute; >#bigcloud

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

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

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

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

#bigcloud

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

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

Что это было

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

animation: bobble 2s infinite; Его расширенная версия будет выглядеть так: animation-name: bobble; animation-duration: 2s; animation-iteration-count: infinite;

Три свойства нашей сокращенной версии развернулись в 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: paused;

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

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

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

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

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

animation-delay: 5s;

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

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

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

animation-delay: -.25s;

Когда вы задаете отрицательное значение, ваша анимация начинается без задержки, но со смещением длительностью, которую вы установили. Вот как будет выглядеть 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), поэтому за подробной информацией обращайтесь туда.

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

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

#somethingSomethingDarkSide

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

animation: bobble 2s infinite;

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

animation: ;

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

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

#somethingSomethingDarkSide

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

В большинстве случаев мне нравится пользоваться сокращенной версией для определения свойств 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. Может быть это трудно представить, поэтому давайте расширим наш текущий пример, чтобы осветить то, о чем я говорю.

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

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

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

#smallcloud
#bigcloud

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

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

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

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

#oppaGangnamStyle

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

#oppaGangnamStyle

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

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

Источник: www.internet-technologies.ru

Анимация элементов в CSS. Часть 1.

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

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

Рис. 190 Пример покадровой анимации.

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

Этапы создания анимации

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

• Первый – определяет начальное положение элемента.
• Второй – определяет положение элемента после смещения элемента до середины окна.
• Третий – определяет конечную точку анимации (начальное положение элемента).

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

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

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

Прежде чем мы перейдем к созданию анимации, хочу обратить Ваше внимание на текущую поддержку свойств анимации браузерами:

Chrome
Firefox
Opera
Safari
IExplorer
Edge

43.0 4.0 -webkit-	16.0 5.0 -moz-	30.0 15.0 -webkit-	9.0 4.0 -webkit-	10.0	12.0

Определение ключевых кадров

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

0%-100% — определяет процент от продолжительности анимации. from — тоже самое, что 0%. to — тоже самое, что 100%.

Свойства, указанные в ключевом кадре со значением !important игнорируются. Ранее в статье «Каскадность в CSS» (раздел «Нюансы конфликтов») мы уже с Вами затрагивали вопросы об отмене значимости стилей.

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

С помощью процентных значений мы определили три ключевые кадра, где происходит изменение. Первоначально элемент к началу анимации получает значение ширины равной 50 пикселям и цвет заднего фона желтый, к 50% процентам анимации (середина анимации) он должен быть уже 100 пикселей и иметь цвет заднего фона зеленый, а к завершению анимации ширина элемента должна составлять 200 пикселей, а цвет заднего фона должен быть красный.

Если наш элемент возвращался бы к первоначальному состоянию (ширина и цвет заднего фона), то мы бы могли указать значения ключевых кадров следующим образом:

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

Продолжительность анимации

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

Перейдем к рассмотрению примера, в котором мы будем анимировать увеличение элементов:

В этом примере мы создали простую анимацию, в которой происходит постепенное увеличение ширины элемента и изменение цвета заднего фона к середине и к концу цикла анимации. С использованием псевдокласса :nth-child() и свойства animation-duration мы указали различные значения продолжительности анимации для элементов в зависимости от их порядкового номера в документе.

Кроме того, для того, чтобы инициировать воспроизведение анимации, мы создали стиль, который свойством animation-name задает имя анимации для элемента на которой в настоящее время наведен курсор мыши (псевдокласс :hover()).

Результат нашего примера:

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

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

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

Результат нашего примера:

Количество анимационных циклов

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

Обратите внимание на то, что запрещается указывать отрицательные значения по объективным причинам, но допускается указывать не целые значения, при этом будет проигрываться только часть анимационного цикла — пропорционально указанному значению (например, значение 1.5 соответствует воспроизведению анимационного цикла полтора раза).

Рассмотрим следующий пример:

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

С использованием селектора класса и свойства animation-iteration-count мы указали различные значения, которые определяют количество проигрываний анимационного цикла у элементов.

Обратите внимание, что мы разместили ссылку, которая производит перезагрузку страницы с использованием URL псевдопротокола javascript: , который позволяет выполнить код языка программирования JavaScript таким образом. Не смотря на то, что это решает нашу задачу по перезагрузке страницы, никогда не используйте URL псевдопротокол javascript: на своих страницах. Так как эта тема выходит за рамки этой статьи и изучения CSS в целом, мы не будем в настоящее время на этом останавливаться.

Результат нашего примера:

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

CSS свойство animation-delay определяет задержку для запуска анимации. Задержка анимации задается в секундах (s), или миллисекундах (ms).

Значение 0s (значение по умолчанию) для свойства animation-delay, указывает, что анимация должна начаться без задержки. Если указать для анимации отрицательное значение задержки, то анимация начнет воспроизводиться без задержки, но со смещением равному указанному значению (т.е. если вы укажите -5s, то анимация будет воспроизведена без задержки и с того момента как будто она уже длится 5 секунд). Допускается указывать несколько значений, перечисленных через запятую (для каждой отдельной анимации).

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

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

Результат нашего примера:

Скорость анимации

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

Возможные значение свойства представлены ниже в таблице:

ЗначениеОписание

ease	Эффект анимации начинается медленно, затем незначительно ускоряется и в конце опять замедляется. Значение эквивалентно cubic-bezier(0.25,0.1,0.25,1) . Это значение по умолчанию.
linear	Определяет эффект анимации с одинаковой скоростью от начала до конца. Значение эквивалентно cubic-bezier(0,0,1,1) . Точка 1 расположена на 0 по оси X и по оси Y, точка 2 — на 1 по оси X и по оси Y.
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) . Точка 1 расположена на 0,42 по оси X и на 0 по оси Y, точка 2 — на 0,58 по оси X и на 1 по оси Y.
cubic-bezier(n,n,n,n)	Определяет пользовательские значения в кубической функции Безье. Она допускает 4 числовых значения от 0 до 1. Первые два значения — координаты X и Y первой точки, а вторые два значения — координаты X и Y второй точки). На данном сайте вы сможете подобрать оптимальные для Вас значения.
steps(int,start|end)	Указывает пошаговую функцию, с двумя параметрами. Первый параметр задает число интервалов в функции (целое положительное число (больше 0). Второй параметр является необязательным и имеет значения «start» или «end» и указывает точку, в которой изменение значений происходит в пределах интервала. Если второй параметр опущен, то присваивается значение «end» . Значение «start» осуществляет переход в начале каждого шага, а «end» в конце каждого шага.
step-start	Значение эквивалентно steps(1, start) . Свойство сразу принимает конечное значение шага в ключевом кадре.
step-end	Значение эквивалентно steps(1, end) . Свойство принимает конечное значение в конце шага.

Обратите внимание, что если для конкретного ключевого кадра вам необходимо определить собственную временную функцию, то необходимо определить её непосредственно в стилях этого кадра:

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

animation-name: «animationName1, animationName2, animationName3»; animation-timing-function: «linear, ease, ease-in»;

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

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

С использованием селектора класса и свойства animation-timing-function мы указали различные значения, которые определяют различную скорость для анимации. Были использованы такие ключевые слова свойства как: ease , linear , ease-in , ease-out , ease-in-out и произвольные (пользовательские) значения в кубической функции Безье.

Результат нашего примера:

Рассмотрим пример функций пошаговой анимации:

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

С использованием селектора класса и свойства animation-timing-function мы указали, что на каждую часть ключевого кадра будет произведено 3 шага (начало точки ключевого кадра/конец точки ключевого кадра), либо 1 шаг (точки ключевого кадра/конец точки ключевого кадра) для функций step-start и step-end .

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

Результат нашего примера:

Источник: basicweb.ru