CSS анимация свойство transition. Слоистая анимация


Содержание материала:

CSS3 transition: плавные переходы

Переходы в CSS — это именно то, что помогает «вдохнуть жизнь» в неподвижную и скучную веб-страницу и анимировать ее. Смена одних CSS-стилей другими через заданный промежуток времени и с определенной скоростью — это и есть задача свойства transition .

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

Рекомендуем взглянуть на примеры CSS-переходов в нашей отдельной статье.

Как создать переход transition

Чтобы реализовать переход в CSS, необходимо записать два стиля для элемента — начальный и конечный. Также к начальному стилю дописывается свойство transition с необходимыми настройками для осуществления перехода. И, наконец, чтобы воспроизвести переход, понадобится «спусковой крючок», который запустит анимацию. Самый простой пример такого «спускового крючка» — это псевдокласс :hover . В этом случае переход от начального стиля к конечному будет происходить при наведении курсора на элемент. При снятии курсора с элемента конечный стиль будет преобразован обратно в начальный.

С какими стилями срабатывает transition

Во-первых, анимированию поддаются все трансформации ( scale() , rotate() , skew() и т. д.). Во-вторых, можно создавать переходы между значениями таких свойств, как color , background , width , height , opacity и т. д. Весь перечень можно посмотреть на сайте W3.org.

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

Свойство transition понимают следующие версии браузеров:

  • IE 10+;
  • Edge 12+;
  • Firefox 5–15 (с префиксом -moz- ), Firefox 16+ (без префикса);
  • Chrome 4–25 (с префиксом -webkit- ), Chrome 26+ (без префикса);
  • Safari 5.1–6 (с префиксом -webkit- ), Safari 6.1+ (без префикса);
  • Opera 12.1+.

Мобильные браузеры также хорошо поддерживают данное свойство (оно не работает лишь в Opera Mini). Ранние версии таких мобильных браузеров, как iOS Safari и Android Browser, распознают свойство transition при указании префикса -webkit- .

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

Из каких свойств состоит transition

Свойство transition является универсальным: в нем можно записать значения для четырех отдельных свойств сразу. Эти свойства мы будем рассматривать по отдельности. Вот их список:

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

На следующей странице мы разберем первое свойство из списка — transition-property.

Как придать индивидуальность веб-странице
используя переходы и анимацию CSS3

П рогрессивно развивающиеся HTML5 и CSS3 позволяют веб-мастерам создавать всё более интерактивные веб-страницы. С помощью функций CSS3 Transitions и CSS3 Animations можно легко добавить индивидуальности при создании своего сайта.

Содержание:

Функция CSS3 Transitions

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

Рассмотрим следующую разметку:

#img <
opacity : 1;
transition-property : opacity ;
transition-duration : 2s ;
transition-delay : 0s ;
transition-timing-function : linear ;
>

Что же из этого следует? А вот что. Если переместить курсор на изображение, то оно начнёт плавно исчезать ( transition-property : opacity ) в течении 2 секунд ( transition-duration : 2s ), без задержки во времени ( transition-delay : 0s ).

Рассмотрим свойства вызывающие переход:

  • transition-property — указывает имя свойства CSS для эффекта перехода. Эффект перехода обычно происходит тогда, когда пользователь наводит курсор на элемент. Значение по умолчанию «all».
  • transition-duration — определяет, сколько секунд (s) или миллисекунд (ms) необходимое для завершения эффекта перехода. По умолчанию значение равно нулю, что означает, что переход происходит мгновенно.
  • transition-delay — определяет, когда эффект перехода начнется. Значение transition-delay указывается в секундах (s) или в миллисекундах (ms). Время может быть отрицательным, в этом случае переход начинается на полпути от его продолжительности. Значение по умолчанию равно нулю.
  • transition-timing-function — задает скорость эффекта перехода. Это свойство позволяет изменять скорость в течении эффекта перехода.

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

#imageWrapper <
display : inline-block ;
width : 320px ;
height : 240px ;
box-shadow : 2px 2px 5px 0px gray ;
position : relative ;
>

#imageWrapper img <
width : 320px ;
height : 240px ;
position : absolute ;
transition-property : opacity ;
transition-duration : 2s ;
transition-timing-function : linear ;
>

#imageWrapper #frontImage, #imageWrapper:hover #backImage <
opacity : 1 ;
>

#imageWrapper:hover #frontImage, #imageWrapper #backImage <
opacity : 0 ;
>

Вот что получилось из этой разметки:

Наведите курсор на изображение, чтобы увидеть эффект CSS3 перехода.

Функция CSS3 Animations

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

Эффект анимации осуществляется с использованием “@keyframes ”. Эффект анимации позволяет элементу постепенно изменяться от одного стиля к другому. Можно изменить столько стилей, сколько вы хотите. Столько раз, сколько вы хотите.

@keyframes fadeOut <
from <
opacity : 1 ;
>
to <
opacity : 0 ;
>
>

#img <
animation-duration : 2s ;
animation-delay : 0s ;
animation-timing-function : linear ;
animation-fill-mode : forwards ;
>

Многие из этих свойств знакомы из обсуждения переходов. Новыми являются:

  • animation-fill-mode — значение forwards указывает браузеру, что следует остановить анимацию на последнем кадре по окончанию последнего повтора и не отматывать ее к первоначальному состтоянию.
  • animation-name — указывает имя keyframe, которое вы хотите связать с селектором.
  • animation-timing-function — указывает скорость анимации. Кривая скорости определяет время анимации, которое используются для перехода от одного набора стилей CSS к другому. Используется для плавного изменения скорости.

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

Это позволяет программировать такие эффекты, как показано в разметке и примере ниже:

#bouncingImage <
width : 320px ;
height : 240px ;
box-shadow : 2px 2px 5px 0px gray ;
animation-duration : 2s ;
animation-timing-function : ease-in-out ;
animation-fill-mode : forwards ;
>

#bouncingImage:hover <
animation-name : zoomInBounce ;
>

@keyframes zoomInBounce <
from <
transform : scale(1) ;
>

40% <
transform : scale(1.15) ;
>

50% <
transform : scale(1.35) ;
>

80% <
transform : scale(1.225) ;
>

90% <
transform : scale(1.275) ;
>

Наведите курсор на изображение, чтобы увидеть эффект.

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

Переходы и анимация

Эволюцией CSS3 стала возможность задавать поведение для переходов и анимации. Фронтенд-разработчики много лет просили реализовать эти взаимодействия внутри HTML и CSS, без использования JavaScript или Flash. Теперь их мечта сбылась.

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

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

Переходы

Как уже упоминалось, чтобы переход имел место, элемент должен получить изменение состояния и для каждого состояния должны быть определены разные стили. Самый простой способ задать стили для различных состояний — это воспользоваться псевдоклассами :hover , :focus , :active и :target .

Есть четыре свойства, связанных с переходами в целом, это transition-property , transition-duration , transition-timing-function и transition-delay . Не все они обязательны для создания перехода, наиболее популярны первые три.

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

Демонстрация transition

Вендорные префиксы

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

transition-property

Свойство transition-property определяет, какие именно свойства будут меняться в сочетании с другими свойствами перехода. По умолчанию, изменяться будут все свойства в различных состояниях. Тем не менее, только свойства заданные в значении transition-property будут затронуты в любых переходах.

В приведённом выше примере, свойство background определено в значении transition-property . Здесь background — единственное свойство, которое будет изменяться в течение 1 секунды в линейном виде. Любые другие свойства, включённые когда изменяется состояние элемента, но не добавленные в значение transition-property , не получат поведение перехода, как это установлено в свойствах transition-duration или transition-timing-function .

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

Демонстрация transition-property

Свойства в переходах

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

  • background-color
  • background-position
  • border-color
  • border-width
  • border-spacing
  • bottom
  • clip
  • color
  • crop
  • font-size
  • font-weight
  • height
  • left
  • letter-spacing
  • line-height
  • margin
  • max-height
  • max-width
  • min-height
  • min-width
  • opacity
  • outline-color
  • outline-offset
  • outline-width
  • padding
  • right
  • text-indent
  • text-shadow
  • top
  • vertical-align
  • visibility
  • width
  • word-spacing
  • z-index

transition-duration

Длительность перехода задаётся с помощью свойства transition-duration . В качестве значения этого свойства можно использовать основные значения времени, в том числе секунды (s) и миллисекунды (ms). Эти значения времени можно также задавать и дробными — .2s, например.

При переходе нескольких свойств можно задать несколько длительностей, по одному на каждое свойство. Как и в случае значения свойства transition-property , несколько длительностей могут быть объявлены с помощью значений, разделённых запятыми. Важен порядок этих значений при определении отдельных свойств и длительностей. К примеру, первое свойство, заданное в transition-property , будет совпадать с первым значением в свойстве transition-duration и так далее.

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

Демонстрация transition-duration

Функция перехода

Свойство transition-timing-function используется для задания скорости, с которой будет двигаться переход. Зная длительность из свойства transition-duration у перехода может быть несколько скоростей в пределах одной длительности. Некоторые наиболее популярные значения ключевых слов для свойства transition-timing-function включают linear , ease-in , ease-out и ease-in-out .

Значение linear определяет переход, движущийся в постоянной скоростью из одного состояния к другому. Значение ease-in определяет переход, который начинается медленно и ускоряется на протяжении перехода, в то время как значение ease-out определяет переход, который начинает быстро и замедляется в течение всего перехода. Значение ease-in-out определяет переход, который начинается медленно, ускоряется в середине, а затем снова замедляется перед окончанием.

За каждой функцией времени стоит кубическая кривая Безье, которую можно указать конкретно с помощью значения cubic-bezier(x1, y1, x2, y2) . Дополнительные значения включают step-start , step-stop и значение steps ( , ).

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

Демонстрация функции перехода

transition-delay

Кроме объявления свойства перехода, длительности и функции времени, вы можете также установить задержку через свойство transition-delay . Задержка задаёт значение времени, в секундах или миллисекундах, которое определяет, сколько времени переход должен ожидать перед выполнением. Как и со всеми другими свойствами перехода, чтобы задержать многочисленные переходы, каждая задержка может быть перечислена через запятую.

Демонстрация transition-delay

Сокращённое свойство transition

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

Топ-пост этого месяца:  Как прослушивать события клавиатуры в Angular основы использования псевдо-событий

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

Свойство CSS Transition

Свойство CSS Transition нужен для установки анимационного перехода из одного состояния в другое. Анимация работает с помощью псевдоэлементов :hover и :active , т.е. при переходе объекта из одного состояния в другое.

Синтаксис CSS transition

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

Примеры со свойством Transition

Пример #1. Анимация в html через transition

На странице преобразуется в следующее

Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:

Код transition: all 1s linear означает следующее:

  • all — плавное действие применяется ко всем свойствам, это касается цвета (color), фона (background). Вместо all можно было написать color , тогда плавный переход распространился бы только на цвет
  • 1s — время в течении которого осуществляется переход (можно задавать в формате милисекунд: 1000ms);
  • linear — объект изменяется с постоянной скоростью (линейно). Есть и другие варианты эффектов (о них будет рассказано чуть ниже)

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

Пример #2. Увеличение объекта в html без смещения других объектов

На странице преобразуется в следующее

Теперь объект увеличивается и не происходит смещения других объектов.

Рассмотрим детально какие значения может принимать каждый из параметров

Значения свойств transition

1. Параметр transition-property

Свойство transition-property отвечает за части свойств объекта, к которым будет применена анимация. Может принимать следующие значения

  • all — ко всему объекту (можно опустить, если задано время)
  • color — к цвету текста
  • background — к цвету фона объекта
  • width , height — к изменению габаритов по ширине и высоте соответственно
  • none — анимация отсутствует (по умолчанию стоит у каждого элемента)

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

2. Параметр transition-duration

Определяет количество времени в течении которого длится трансформация. Измеряется в секунда (s) и милисекундах (ms).

Параметр transition-duration можно задавать отдельным свойством в CSS:

3. Параметр transition-timing-function

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

Где value может принимать значения:

  • ease (значение по умолчанию) — замедление во время старта и финиша, равносильно параметру cubic-bezier(0.25, 0.1, 0.25, 1.0)
  • linear — равномерная скорость на протяжении всей трансформации, равносильно параметру cubic-bezier(0.0, 0.0, 1.0, 1.0)
  • ease-in — замедление в начале, равносильно параметру cubic-bezier(0.42, 0, 1.0, 1.0)
  • ease-out — замедление в конце, равносильно параметру cubic-bezier(0, 0, 0.58, 1.0)
  • ease-in-out — замедление при старте и в конце (похож на ease, но с другими коэффициентами скорости), равносильно параметру cubic-bezier(0.42, 0, 0.58, 1.0)
  • step-start — мгновенный старт, равносильно параметру steps(1, start)
  • step-end — мгновенное исполнение в конце, равносильно параметру steps(1, end)
  • cubic-bezier(a1,b1,a2,b2) — задание собственного изменения скорости
  • steps(a,b) — изменение рывками

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

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

8 простых эффектов с использованием свойства CSS3 Transition

Здравствуйте, уважаемые читатели XoZbloga! CSS3 внёс бесчисленные количество новшеств для дизайнеров, и большинство из них очень легки в применении. Достаточно описать пару строк кода, что даст вам удивительный анимационный эффект, который будет на загляденье всем посетителям и поспособствует их активности на сайте. В этой статье рассмотрим 8 простых эффектов с использованием CSS3 свойства — Transition. Если вам нужен красивый и функциональный сайт, сделанный с использованием современных технологий, то не задумывайтесь — обратитесь к специалистам http://stfalcon.com/en/services/web-development. Они помогут вам реализовать любой сложный проект.

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

На текущий момент CSS3 Transition поддерживается множеством браузеров. Более подробно Вы можете узнать об этом здесь.

Подготовка

Все далее описанные анимационные эффекты выполнены на блоке DIV. Итак, для начала опишем базовые свойства для блока:

Значение свойства Transition состоит и 3 составляющих: transition-property — all, transition-duration — 0.3s и третьей величины, transition-timing-function — ease, также есть еще одна составляющая ( transition-delay далее в таблице).

Наименование Описание Значение
transition-property Свойство, к которому применяем анимацию Практически любое свойство CSS: color, background, width, font-size и т.д. all — все свойства.
transition-duration Длительность анимации Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.
transition-timing-function Временная функция, используемая для анимации ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delay Задержка анимации Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.

Теперь переходим к эффектам.

1. Затемнение

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

Плавная анимация перемещения с помощью CSS

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

Перемещение может быть немного сумасшедшим, как это:

Your browser does not support inline frames or is currently configured not to display inline frames.

Перемещение может быть и не таким явным. Например, таким, которое возникает при наведении курсора мыши на один из квадратов на рисунке ниже:

Your browser does not support inline frames or is currently configured not to display inline frames.

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

Преобразование с помощью translate3d()

При перемещении элемента изменяется его вертикальная и горизонтальная позиции. Существуют несколько свойств CSS , которые применяются для этого. Но я хочу порекомендовать вам использовать функцию translate3d свойства transform вместо привычных margin , padding , left , top , потому что она обеспечивает более плавную анимацию.

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

Аргумент Х задает перемещение по горизонтали, Y — по вертикали. Например, если вы хотите переместить содержимое на 20 пикселей вправо и вверх, функция translate3d должна выглядеть следующим образом:

Третий аргумент, который определяет перемещение по оси Z , мы рассматривать не будем. Так как нас интересует 2d-hover эффекты CSS .

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

Переход

Чтобы использовать это свойство в переходе, нужно выполнить два этапа. Сначала необходимо указать transform в качестве свойства, которое должно отслеживать переход:

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

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

Анимация

В случае анимации, убедитесь, что ключевые кадры в @keyframes содержат свойство transform с translate3d :

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

Не забывайте о префиксах

Чтобы разметка работала в различных браузерах, обязательно используйте для свойства transform вендорные префиксы или библиотеку — prefix-free .

Переходы с помощью JavaScript

Также можно создавать анимацию перемещения в JavaScript . Те же правила действуют и здесь. Сначала нужно установить позицию, используя transform translate3d , но в JavaScript это немного сложнее.

Фрагмент кода, который нужен для этого, выглядит следующим образом:

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

Почему нам не подходит установка позиции с помощью margin , top , left и т.д.?

Если у вас нет на то особой причины, не используйте для создания hover эффектов CSS свойства margin , padding , top , left , bottom или right . Хотя это может показаться противоречащим здравому смыслу. Позвольте мне пояснить…

Ненужные вычисления

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

Вы можете задать для position элемента, который вы перемещаете, значение fixed или absolute . Это избавит браузер от необходимости вычислять макет для всего документа. Но в этом случае браузер все равно выполняет вычисления для элемента, который перемещается. И результат применения translate3d не обязательно будет идентичен результату, получаемому при использовании margin , padding и т.д. Более того, как вы увидите в следующем разделе, они не будут на 100% идентичны.

Аппаратное ускорение

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

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

А как обеспечить, чтобы анимация в режиме аппаратного ускорения использовала GPU ? Применить translate3d ! При преобразовании элемента с помощью translate3d он обрабатывается через GPU в Webkit-браузерах , таких как Chrome и Safari ( которые установлены на iPhone и iPad ), в Internet Explorer 9/10 , а также в последних версиях Firefox . Это дает translate3d явные преимущества.

Как насчет JavaScript?

Что касается hover эффектов CSS , созданных на JavaScript , где все интерполяции обрабатывается кодом, я на самом деле не знаю, является ли использование GPU таким продуктивным. Но для установки с помощью JavaScript переходов и анимации CSS со свойством translate3d используется GPU .

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

Боже, благослови преобразования!

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

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

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

CSS Animations

Анимация CSS

CSS анимация позволяет анимацию большинства HTML элементов без использования JavaScript или Flash!

Поддержка браузеров для анимаций

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

Номера -WebKit-, -МОЗ-, или -o- укажат первую версию, которая работала с префиксом.

Свойство
@keyframes 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-
animation 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

Что такое анимация CSS?

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

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

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

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

Правило @keyframes

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

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

В следующем примере анимация «example» привязывается к элементу

Пример

/* The element to apply the animation to */
div <
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
>

Примечание: Свойство animation-duration определяет, сколько времени должно занять анимация для завершения. Если свойство animation-duration не задано, анимация не будет выполняться, так как значение по умолчанию равно 0 секундам.

В приведенном выше примере мы указали, когда стиль изменится с помощью ключевых слов «from» и «to» (который представляет 0% (Start) и 100% (полный)).

Также можно использовать процент. С помощью процента можно добавить любое количество изменений стиля.

В следующем примере изменяется цвет фона элемента при завершении анимации на 25%, завершении 50% и повторном завершении анимации на 100%:

Пример

/* The element to apply the animation to */
div <
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
>

В следующем примере изменяется как цвет фона, так и положение элемента

Пример

/* The element to apply the animation to */
div <
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
>

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

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

Следующий пример имеет задержку в 2 секунды перед началом анимации:

Пример

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

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

Пример

Установить, сколько раз анимация должна выполняться

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

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

Пример

В следующем примере используется значение «Infinite» для того, чтобы анимация продолжалась навсегда:

Пример

Запуск анимации в обратном направлении или альтернативные циклы

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

Свойство «направление анимации» может иметь следующие значения:

  • normal — Анимация воспроизводится как обычная (вперед). Это значение по умолчанию
  • reverse — Анимация воспроизводится в обратном направлении (назад)
  • alternate — Анимация сначала разыгрывается вперед, затем назад
  • alternate-reverse — Анимация сначала воспроизводится назад, а затем пересылается

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

Пример

В следующем примере используется значение «альтернативный», чтобы сначала запустить анимацию вперед, а затем назад:

Пример

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

Пример

Укажите кривую скорости анимации

Свойство animation-timing-function определяет кривую скорости анимации.

Свойство «анимация-время-функция» может иметь следующие значения:

  • ease — Указывает анимацию с медленным запуском, а затем быстро, а затем закончить медленно (это по умолчанию)
  • linear — Задает анимацию с одинаковой скоростью от начала до конца
  • ease-in — Задает анимацию с медленным запуском
  • ease-out — Задает анимацию с медленным концом
  • ease-in-out — Задает анимацию с медленным началом и концом
  • cubic-bezier(n,n,n,n) — Позволяет определить собственные значения в функции кубической Безье

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

Пример

Задание режима заливки для анимации

Анимация CSS не влияет на элемент до воспроизведения первого ключевого кадра или после воспроизведения последнего ключевого кадра. Свойство «анимация-режим заполнения» может переопределить это поведение.

Свойство animation-fill-mode задает стиль для целевого элемента, если анимация не воспроизводится (до начала, после завершения или и того и другого).

Свойство «анимация-режим заполнения» может иметь следующие значения:

  • none — Значение по умолчанию. Анимация не будет применять стили к элементу до или после выполнения
  • forwards — Элемент сохранит значения стиля, заданные последним ключевым кадром (зависит от анимации-направления и анимации-количество итераций)
  • backwards — Элемент получит значения стиля, заданные первым ключевым кадром (в зависимости от направления анимации), и сохранит это во время анимации-период задержки
  • both — Анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации в обоих направлениях

Следующий пример позволяет элементу

Пример

Следующий пример позволяет элементу

Пример

Следующий пример позволяет элементу

Пример

Анимация Сокращенное свойство

В приведенном ниже примере используются шесть свойств анимации:

Пример

Такой же эффект анимации, как и выше, можно достичь с помощью сокращенного animation Свойства:

Пример

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

В следующей таблице перечислены правила @keyframes и все свойства анимации CSS:

Создаём CSS-анимацию без плагинов

Приветствую вас на сайте Impuls-Web!

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

Навигация по статье:

Как это работает?

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

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

Анимация плавного увеличение и исчезновение элемента

Итак, начнем с самого простого эффекта анимации, это у нас будет эффект плавного появления и исчезновения.

    1. Для этого нам нужно будет добавить на свой сайт какое-либо изображение или блок с текстом, или любой другой элемент, и добавить для него определенный CSS-класс. В моем случае я добавляю для этого элемента класс animate-block.

И здесь нам необходимо убедиться в том, что у нас открыт файл «Таблица стилей style.css»
3. Все изменения мы будем добавлять, как обычно, в самом конце этого файла.

В файле стилей нашей темы, или же просто в файле стилей сайта, указываем наш CSS-класс, а далее в фигурных скобочках указываем CSS-свойство animation.

На первом месте у нас стоит название анимации, его мы задаем самостоятельно. Название задается латинскими буквами, и оно может быть произвольным.
Далее мы задаем время анимации, чем больше это время, тем более плавно будет происходить наша CSS-анимация. В данном случае время задается в секундах.
Далее мы задаем количество повторов анимации. В данном случае используется значение infinite, что означает бесконечность. То есть наша анимация не будет иметь какое-то ограниченное количество повторений, и будет продолжаться бесконечно.
4. После того, как мы задали название CSS-анимации и объявили ее основные параметры, нам необходимо будет использовать правило @keyframes для того, чтобы задать начальное и конечное значение нашего элемента, а так же, при необходимости, промежуточное значение. В данном примере мы будем изменять уровень прозрачности. В CSS это правило выглядит следующим образом:

CSS анимации на реальном проекте

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

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

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

Состояние спецификации

Модули CSS transitions и animations в W3C по-прежнему находится в состоянии “working draft”, но Firefox, Opera и Internet Explorer 10 уже откинули префиксы для этих свойств. Избавление от префиксов означает, что производители браузеров уже уверены в стабильности технологии и рекомендуют её к активному использованию.

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

Информационный голод

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

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

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

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

CSS анимации в реальном мире

Давайте посмотрим, какие веб-проекты осмелились укротить новую технологию и не побоялись выступить пионерами в отрасли:

ВКонтакте частично использует анимацию на простых, маленьких блоках, часто выбирая JavaScript анимацию вместо CSS, даже для простых анимаций opacity и в переходах цвета текста. Поиск по стилям проекта выдаёт 17 вхождений transition (не считая свойства с префиксами).

На Facebook анимации тоже не прижились, по всем стилям найдено только пять вхождений transition, и единственная попавшаяся на глаза анимация последнего отосланного сообщения сделана на JS.

Ребята из Google+, видимо, принципиально не используют анимации (наверное, из-за проблем Chrome в работе с анимациями :), нашлось только 3 вхождения transition. Поиск “animation” выдал только одно вхождение в Goolge+.

На момент написания статьи в стилях Одноклассников — 140 вызовов transition и 4 animation, учитывая, что часть анимаций стандартизирована и переиспользуется во многих местах.

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

Что стоит анимировать

Чем больше мы приближаем работу интерфейса к реальности, тем понятней он становится для пользователя. В жизни практически ничего не происходит мгновенно — открывая дверь, или закрывая лаптоп, мы наблюдаем кучу промежуточных состояний, а не резкое “открыто/закрыто”, как это происходит в вебе.

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

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

Обмен опытом

Подборка багов и решений

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

Opera

При комбинировании анимаций, например, opacity с box-shadow, могут наблюдаться проблемы в Опере (см. блок 1 на демо странице), когда тень полностью исчезает вместе с ховером, при обратной анимации тень возвращается с задержкой и без ожидаемой плавности.

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

Блоки с псевдоэлементами проблемно анимируются в Opera 12, оставляя схожие артефакты с первым примером (блок 2), причем в Opera 11.64 работает стабильно.

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

Firefox

Если не указать значение «s» (секунд) в transition, Firefox игнонирует анимацию полностью (блок 1). В блоке 3 выставлено рабочее значение анимации тени в Firefox.

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

Webkit

В Chrome на Mac (как минимум до 23-й версии) при использовании transition вместе с transform (блок 4), а также и при других условиях ломается сглаживание текста на всей странице.

Проблему помогает решить свойство backface-visibility: hidden, применённый на body, либо на блок с мерцающим текстом, но такой фикс тоже имеет свои последствия (подробности ниже в статье), к тому же, текст потеряет сглаживание навсегда.

В Chrome не работает transition, если блок меняет свойства с display: block -> display: inline/inline-block (блок 5).

Чтобы обойти проблему, нужно применять animation (блок 5.1).

В Chrome на Windows во время плавной анимации transform все инпуты получают белый фон (блок 4 с трансформом и 6 с инпутом).

Подобный эффект также наблюдается, если на любой элемент страницы применить backface-visibility. Решение проблемы пока не было найдено.

Общие баги

Нигде, кроме Webkit, не работает transition на background-image, нельзя поставить даже задержку, картинка меняется мгновенно (блок 7).

Для решения проблемы приходилось комбинировать анимацию в нескольких слоях с помощью opacity.

Во время transition блок с анимацией opacity перекрывает другие блоки.

Чтобы избежать проблем, нужно поставить блоки, на которые не нужна анимация ниже в доме (так они автоматически получат выше z-index), либо прописать z-index вручную (блок 8.1).

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

На заметку

В CSS transition возможно контролировать анимацию в обе стороны, например, меняя скорость анимации:

При ховере переход в opacity: 0; произойдёт за 1 секунду, а обратный переход в opacity: 1; будет длиться 10 секунд. Таким образом, можно, например, при ховере “навсегда” оставить свойства ховер стейта, используя очень большую задержку.

При использовании animation, следует ожидать, что во время анимации блок не подвержен никаким внешним воздействиям (прим. смена цвета на ховер). Для этого можно сначала остановить анимацию, используя “animation-play-state:paused;“ или совсем обнулить анимацию, применяя свойство “animation: none;”.

Работая с анимациями, переодически приходится возвращаться к истокам и заново изучать самые древние возможности CSS, как у нас вышло с псевдоклассом :active.

Backface-visibility

Ранее мы упоминали backface-visibility как вариант решения некоторых багов webkit браузеров, но местами это свойство может привести к еще большим проблемам. Помимо стандартного предназначения этого свойства (прятать обратную сторону 3D анимируемого блока), его часто используют для включения аппаратного ускорения, позволяющего с помощью GPU ускорить время рендеринга страниц в браузере.

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

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

Первый раз мы столкнулись с последствиями этого свойства, когда решили применить его на элемент body для Chrome и Safari на Mac ради избежания мерцания текста при анимациях. При этом в Safari 5 стало появляться множество необъяснимых багов, страница разъезжалась в совершенно непредсказуемых местах, вследствие пришлось оставить backface-visibility только для Chrome Mac и на самые проблемные места с мерцающим текстом в Safari. С выходом Safari 6 ситуация немного устаканилась и поведение браузера по отношению к злополучному свойству приравнялось к поведению нынешнего Chrome.

На прицеле

Всегда следите за обновлениями браузеров и проверяйте свой портал на developer и preview версиях, если вы не хотите, чтобы ваш портал прогнулся под натиском багов из-за очередного обновления браузера.

Помимо реализации поддержки новых технологий и откидывания префиксов, вместе с новой версией могут прийти не совсем стабильные алгоритмы оптимизации рендеринга страницы. Учитывая, что часть рендеринга браузеры начинают перекидывать на GPU, стоит так же ожидать, что баги могут воспроизводится только на машинах с определённым железом. Были случаи, что на некоторых компьютерах в одном и том же браузере не работал 3D transform из-за видео карты.

Вместе с выходом 21-й версии Chrome на стабильной ветке нам пришлось встретится с кучей необъяснимых багов, касающихся не только CSS3 анимаций, одним из критичных оказался баг с черными пятнами (только в Chrome на Windows), которые хаотично появлялись по всей странице из-за анимации opacity. Самое интересное, что версии stable и dev (в Chrome) могут легко отличаться, даже если в 22-й dev версии баг починен, не факт, что с переводом ветки в stable фикс останется.

Интересный случай наблюдался и с выходом Safari 6, с обновлением браузер подтянул много изменений из ветки разработки webkit движка и перенял множество багов нынешнего Chrome.

Оптимизация

Одно из основных правил нашей команды разработки интерфейсов — как можно больше pure CSS решений. Использование CSS взамен JavaScript даёт отличный прирост производительности клиентской части как и по скорости работы интерфейса, так и по времени разработки.

Every byte counts

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

=
К слову, самая минимальная запись анимации — “transition: 1s”, остальные свойства по умолчанию: «all ease 0;»

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

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

Также не забывайте следить за префиксами, например, свойств -ms-animation и -ms-transition вообще не существует, т.к. 10-ая версия Internet Explorer вышла с уже опущенными префиксами. CSS препроцессоры позволяют сильно упросить работу с префиксами с помощью миксинов.

Стандартизируем

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

Вот пример одного из переиспользуемых модулей:

Этот стандартный модуль позволяет нам сэкономить кучу повторных вхождений кода для самого часто встречающегося эффекта анимации. Используя дополнительно свойство “visibility”, мы реализуем обратную совместимость для браузеров, не поддерживающих CSS анимации.

Вывод

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

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

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

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

Топ-пост этого месяца:  Создание фреймворка. Структура
Добавить комментарий