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