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