Проблема

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

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

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

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