Frontender Magazine

Красивые анимации состояний с помощью animation-play-state

Если CSS-анимация применяется сразу при загрузке страницы, все просто. Можно просто использовать CSS-свойство animation, и все. Но что делать, если анимация применяется к определенному состоянию, например по :hover, :active, :focus или просто при изменении класса с помощью JavaScript?

Простое решение будет выглядеть приблизительно так:

Однако, это значит, что когда вы уберете курсор с элемента он резко вернется в свое начальное состояние (в котором отсутствует вращение). В большинстве случаев будет предпочтительно остановить анимацию на последнем показанном кадре и оставить в таком состоянии до того момента, как пользователь снова наведет курсор на элемент. Чтобы добиться такого эффекта, мы можем применить анимацию, изначально добавив animation-play-state: paused;, и изменять значение этого свойства по :hover на animation-play-state: running;. Вот что у нас получится:

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

Но будьте осторожны, пока это все работает не слишком хорошо, например, есть баги с отрисовкой в Firefox и IE (примечание переводчика: я таковых не заметил.), кроме того картину портят несколько CSS-свойств, которые пока не поддерживаются (например, baseline-shift в SVG), но все это проблемы, которые я буду решать в следующий раз, когда столкнусь с ними, выполняя очередную задачу, и все это опять выльется в то, что работа займет намного больше, чем та пара часов, которые я планировала на неё потратить. Кроме анимаций на этом одностраничнике вас могут заинтересовать пуговицы, сделанные на чистом css (видите, чего я понаделала?) или тиснение на кожаной рамке вокруг фотографии. Твидовый фон и цветовая гамма —  заслуга Лоры Калбег (Laura Kalbag). Кроме того, в процессе работы над этим проектом я экспериментировала с SASS, и работать с ним оказалось намного приятнее, чем с LESS, так что в случаях, когда мне нужен препроцессор, буду теперь использовать его.

Screenshot

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Lea Verou
Автор:
Lea Verou
Сaйт:
http://lea.verou.me/
Twitter:
@leaverou
GitHub:
LeaVerou
Facebook:
leaverou
Антон Немцев
Переводчик:
Антон Немцев
Сaйт:
http://frontender.info/
Twitter:
@silentimp
GitHub:
SilentImp
Skype:
ravencry

Комментарии (4 комментария, если быть точным)

Автар пользователя
pvpshoot

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

Автар пользователя
SilentImp

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

Автар пользователя
nicothin

в лисе проблема весьма заметна: элемент с текстом анимируется, после остановки тексту добавляется сглаживание пауза между остановкой анимации и добавлениес сглаживания тексту (это визуально очень заметно меняет плотность текста) — порядка 1/2 - 1/3 секунды (у меня).

Автар пользователя
reklatsmasters

Интересно реализовано обтекание текстом - через SVG.