Синхронизация анимации и переходов в CSS3

1. Обзор использования переходов и анимации
2. Некоторые ссылки
3. анимации
4. ключевые кадры
5. Запустите нашу анимацию
6. Поставьте анимацию на паузу
7. Как работают временные функции
8. CSS-функция cubic-bezier ()
9. Инструменты для создания ваших собственных кривых Безье
10. Функция CSS steps ()
11. заключение

Появление CSS3 несколько лет назад для многих из нас значительно изменило способ интеграции веб-сайта. Во-первых, именно графические свойства (закругленные углы, тени) вошли в режим производства. Эти свойства были лучше всего поддержаны различными браузерами, и им было легко подражать на самых старых из-за инструментов в нашем распоряжении (например: Css3Pie , Selectivizr , Modernizr и т. д.). Даже избыточная задача префикса наших свойств CSS3 теперь легче с Prefixr и PrefixFree ,

Сегодня спектр возможностей, доступных интегратору, впечатляет. И, наконец, свойства перехода и анимация довольно хорошо поддерживаются всеми современными браузерами, в том числе из Internet Explorer 10 , Очевидно, что отсутствие поддержки старых версий Internet Explorer является самой большой помехой для этих новых свойств. Тем не менее, эти модули CSS3 уже широко используются в производстве в мобильном веб-домене!

Тема переходов и анимации уже была рассмотрена многими авторами. Однако эти два модуля CSS3 имеют несколько функций, которые сложнее понять; или, по крайней мере, малоизвестно. Целью данного руководства будет подведение итогов работы временных эффектов переходов и анимации. В то же время я сосредоточусь на том, чтобы познакомить вас с двумя довольно неизвестными функциями CSS3, называемыми: cubic-bezier , которые позволят вам создавать собственные кривые Безье для управления текучестью ваших анимаций, и шагами , которые позволят вам разделить ваши переход в несколько прямых шагов (в «шаг»).

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

Обзор использования переходов и анимации

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

Некоторые ссылки

переходы:

Развлечения:

переходы

Переходы изменяют значение свойства CSS. Это изменение состояния может быть инициировано при добавлении псевдокласса (: hover,: focus,: active,: target,: флажок и т. Д.) Или при изменении одного или нескольких классов (add / удалить через Javascript).

Свойства CSS, которые могут подвергаться переходу, априори являются всеми числовыми значениями. Например: ширина, поля, отступы, цвет и т. Д. (Неполный) список этих свойств доступен на веб-сайте w3c ,

Различные свойства переходов:

• transition-property: Определяет свойства CSS, которые будут подвергаться переходу (например: ширина). Ключевое слово all будет предназначаться для всех свойств, которые могут переходить. (Обязательно)
• transition-duration: устанавливает время перехода в секундах (с) или миллисекундах (мс). (Обязательно)
• Функция перехода по времени: Определяет используемый эффект синхронизации (модель интерполяции). Мы вернемся к этим эффектам в другой главе. (Необязательно)
• transition-delay: Определяет опережение или задержку, которые переход примет относительно своего запуска. (Необязательно)

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

selector {transition-property: all; длительность перехода: .5с; / * мы могли бы также написать 500 мс * / transition-timer-function: ease-in; задержка перехода: 1 с; }

Примечание. Часто лучше объявить переход только для селектора, а не для селектора с псевдоклассом (как селектор: hover), поскольку в последнем случае переход будет происходить только тогда, когда Мышь зависает над элементом, а не когда он уходит.

Очевидно, что CSS-переходы также имеют упрощенный синтаксис (невероятно полезен для всех браузерных префиксов). Таким образом, мы напишем:

селектор {переход: <переходное свойство> <переходная длительность> <переходная временная функция> <переходная задержка>; } / * Или добавив несколько свойств * / selector {transition: <свойство-перехода> <продолжительность-перехода> <функция-перехода> <задержка-перехода>, <свойство-перехода> <продолжительность-перехода> <переход- функция синхронизации> <задержка перехода>; }

Примечание: переходы все еще находятся в черновом варианте в W3C, поэтому префиксы браузера все равно будут необходимы. Браузеры Gecko, такие как Firefox (-moz-), браузеры Webkit, такие как Safari, Google Chrome и большинство мобильных браузеров (-webkit-), и браузеры Presto, такие как Opera (-o-), поддерживают переходы с префиксом.

анимации

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

Анимация может быть запущена во время смены псевдокласса (: hover,: focus,: active,: target,: флажок и т. Д.), Во время изменения класса с помощью Javascript или просто при загрузке файла. стр.

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

Для создания CSS-анимации нам нужны два отдельных элемента: объявление ключевого кадра, определенное в @ -rule, и ссылка селектора на эту анимацию в блоке. Код CSS

Очень быстро это может выглядеть как анимация:

@keyframes monanimation {0% {color: blue; } 100% {цвет: папайя; }} селектор: hover, селектор: фокус, селектор: активный {анимация: монофонический 1.5s easy-in-out; }

Анимации все еще находятся на стадии черновика, вам, очевидно, потребуется добавить префиксы браузера (в настоящее время Webkit -webkit-, Gecko -moz- и Opera -o- поддерживают анимации. Я также подумаю о IE 10 -ms -).

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

ключевые кадры

Ключевые кадры представляют ход вашей анимации. Значения в процентах представляют определенный момент времени в течение всей анимации. Таким образом, 10% будут представлять 6-ю секунду анимации в течение одной минуты.

Примечание. Следует отметить, что ключевые кадры 0% и 100% являются обязательными и что их пропуск будет препятствовать работе вашей анимации в некоторых браузерах.

Вот несколько замечаний навалом:

• Переход между каждым ключевым кадром делает анимацию более плавной.
• Ключевые кадры не обязательно должны быть в порядке, ключевой кадр 100% может быть объявлен до ключевого кадра 0%.
• Если несколько ключевых кадров имеют одно и то же значение, можно вставить их в одну строку, отделяя их от запятой.

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

@ -webkit-подпрыгивание ключевых кадров {40%, 70%, 90% {внизу: 0; -WebKit-анимация-время-функция: простота; } 0% {низ: 200 пикселей; слева: 0; -webkit-animation-timer-function: легкость в работе; } 55% {низ: 50 пикселей; -webkit-animation-timer-function: легкость в работе; } 80% {низ: 25 пикселей; -webkit-animation-timer-function: легкость в работе; } 95% {низ: 10 пикселей; -webkit-animation-timer-function: легкость в работе; } 100% {слева: 110 пикселей; низ: 0; -WebKit-анимация-время-функция: простота; }}

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

Пример анимации с использованием эффекта синхронизации , И та же анимация, нет эффекта синхронизации , Вы наверняка поймете важность их использования!

Запустите нашу анимацию

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

• animation-name: где мы указываем название используемой анимации. (Обязательно)
• animation-duration: где мы указываем продолжительность анимации в миллисекундах (мс) или секундах. (Обязательно)
• animation-iteration-count: количество раз, которое анимация должна быть выполнена. Значение должно быть целым числом или ключевым словом бесконечным, чтобы анимация повторялась до бесконечности. Значение по умолчанию - 1. (Необязательно)
• animation-direction: Определяет, должна ли анимация всегда воспроизводиться от начала до конца, или, если при визуализации в конце, она должна повторять анимацию в обратном порядке. По умолчанию анимация начинается с начала (обычно), но использование альтернативного ключевого слова меняет направление анимации. Анимация-управление демонстрацией (Необязательно)
• Функция-анимация-время: Определяет эффект синхронизации (модель интерполяции) между каждым ключевым кадром. Как было показано ранее, это свойство также можно изменять в ключевом кадре. (Необязательно)
• animation-delay: это значение будет устанавливать задержку перед началом анимации или, в случае отрицательного значения, аванс, который должен пройти анимация перед запуском. (Необязательно)
• animation-fill-mode: это свойство определяет начальное и конечное состояние вашей анимации. Вот разные значения:
  • вперед: сообщает браузеру оставить элемент в его окончательном состоянии во время последней итерации. (элемент не возвращается в исходное состояние)
  • в обратном направлении: сообщает браузеру, что при загрузке страницы элемент должен переводить элемент в его состояние, установленное на ключевой кадр 0%, даже если указана отрицательная задержка.
  • оба: применить два предыдущих значения.
  • none: скажет браузеру стилизовать элемент в соответствии с его состоянием на первом видимом ключевом кадре (в случае отрицательной задержки) и вернуть анимацию к ключевому кадру 0% после последней итерации. Это поведение по умолчанию.

Очевидно, что при большом количестве значений (с префиксами браузеров и т. Д.) Вы быстро создадите 21 дополнительную строку в своем блоке кода. Таким образом, мы будем чаще использовать упрощенный синтаксис:

селектор {анимация: <имя> <продолжительность> <функция времени> <задержка> <счетчик итераций> <направление> <режим заполнения>; }

Или, если вы хотите применить несколько анимаций к элементу:

селектор {animation: <имя> <длительность> <функция времени> <задержка> <счетчик итераций> <направление> <режим заполнения>, <имя> <продолжительность> <функция времени> <задержка> <счетчик итераций > <направление> <режим заполнения>; }

Поставьте анимацию на паузу

И чтобы закрыть эту главу о CSS3-анимациях, вы также можете приостановить анимацию с помощью свойства animation-play-state, которое принимает одно из следующих двух значений: running (по умолчанию) или paused для остановки анимации анимация.

селектор: hover {-webkit-animation-play-state: приостановлено; -moz-анимированный-игра-состояние: приостановлена; Анимация-игра-состояние: приостановлена; }

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

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

• переходное время функция
• анимация-функция времени (в блоке кода CSS или в ключевом кадре)

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

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

В случае предыдущего графика (где используется кривая Безье), наша анимация будет начинаться медленно и медленно заканчиваться.

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

• легкость: немного замедляется в начале и заканчивается медленно. (кубический Безье (0,25, 0,1, 0,25, 1,0))
• линейный: переход будет устойчивым без замедления или ускорения. (кубический Безье (0,0, 0,0, 1,0, 1,0))
• Упрощение: начнется медленно (кубический Безье (0,42, 0, 1,0, 1,0))
• замедление: закончится медленно (кубический Безье (0, 0, 0.58, 1.0))
• easy-in-out: начнется и закончится медленно (без кубика (0,42, 0, 0,58, 1,0))
• step-start: элемент примет окончательное значение своего перехода, как только переход будет запущен. Другими словами, не будет видимого перехода. (шаги (1, начало))
• step-end: элемент примет окончательное значение своего перехода в конце предоставленной им продолжительности. Другими словами, у нас будет впечатление, что произошла задержка. (шаги (1, конец))

Примечание. Каждый эффект по умолчанию - это функция cubic-bezier () или steps (). Я указываю значения каждой функции для справки, мы более подробно остановимся на дальнейшем использовании функций cubic-bezier () и steps () в следующих главах.

CSS-функция cubic-bezier ()

Его синтаксис

Кривая кубического Безье будет определяться четырьмя точками (p0, p1, p2, p3), расположенными на графике, где оси X и Y стоят в масштабе от 0 до 1.

Точки p0 и p3 всегда будут иметь соответствующие значения позиционирования (0,0) и (1,1). Само по себе p0 представляет начало перехода, а p3 представляет конец. Эти две точки являются фиксированными и не могут быть изменены.

С другой стороны, p1 и p2 могут быть расположены в соответствии с нашими потребностями на графике с использованием функции кубического Безье.

Таким образом, функция кубического Безье используется для определения положения в X и Y точек 1 и 2. Функция будет принимать в качестве параметра 4 плавающие числа, представляющие соответственно:

функция времени перехода: кубический Безье (<X p1>, <Y p1>, <X p2>, <Y p2>);

Примечание: вы должны использовать плавающее число. Итак, нам нужно будет написать 1.0 вместо 1 и так далее.

Значение позиции на оси X (представляющее время) двух точек должно иметь значение от 0 до 1. Однако значение в Y может принимать любое значение.

Примечание . Возможность задать ненулевое значение в диапазоне от 0 до 1 для значения Y является недавним изменением спецификации w3c. При этом, эта возможность в настоящее время игнорируется в браузерах webkit (На сегодняшний день Google Chrome имеет версию 15, а Safari - версию 5.1). Тем не менее, эта ошибка должна быть исправлена ​​в ближайшее время, и учитывая скорость распространения новых версий в Chrome и Safari, это всего лишь несколько месяцев, прежде чем эта возможность будет полностью использована. В Firefox и Opera все уже работает.

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

Пример функции cubic-bezier (), используемой для получения эффекта отскока

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

Инструменты для создания ваших собственных кривых Безье

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

Функциональность большинства этих инструментов все еще ограничена ( Оперный переход-время-функция ), Я избегаю вам длинный список, чтобы сосредоточиться только на сайте: cubic-bezier.com ,

Этот инструмент был создан Леа Веру и просто позволяет вам создавать свои собственные кривые Безье для временных эффектов CSS. 3 Некоторые функции этого инструмента делают его обязательным. Среди других:

• Возможность сохранять и делиться своими собственными кривыми.
• Возможность проверить свои кривые вживую и сравнить их.
• Графический интерфейс, позволяющий очень просто понять кривые Безье.
• Сайт на HTML5 и холсте очень вдохновляет!

По сути, все, что вам нужно сделать, это выяснить, если вы еще этого не сделали! (И если вы еще не полностью понимаете функцию cubic-bezier (), у вас будут конкретные примеры этого)

Функция CSS steps ()

Функция CSS steps () позволяет вам определить переход по лестнице. Это означает, что ваш переход не будет плавным, как если бы он использовал Cubic-Bezier, но будет проходить через четко определенные шаги.

Синтаксис этой функции довольно прост. Это займет два параметра:

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

Таким образом, график, представляющий функции шаги (3, начало) и шаги (3, конец), будет следующим:

Функция steps () может использоваться для имитации действия пишущей машинки или для анимации изображения.

заключение

Здесь вы, я надеюсь, немного более осведомлены об использовании временных эффектов и переходов / анимаций в целом. Как мы видим изо дня в день, инструменты, которые предлагает нам CSS3, чрезвычайно мощны, и мы еще не закончили обходы. Но будьте осторожны, это не потому, что анимации существуют, вы должны поместить их повсюду! Давайте не будем возвращаться в экстравагантную сеть начала 2000-х ...

А пока вот несколько демонстраций и инструментов, которые могут вас вдохновить:

Похожие

Комментарии