Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание плавных анимаций с использованием состояния воспроизведения анимации

8 февраля 2016 | Опубликовано в css | 1 Комментарий »

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

 

 


Безыскусный подход в такой ситуации мог бы быть, например, таким:

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

Код HTML

<div ontouchstart="">Hover over me and watch me spin!</div>

Код CSS

/** * Простой вариант анимации при наведении указателя мыши */

div {
        width: 9em;
        padding: .6em 1em;
        margin: 2em auto;
        background: yellowgreen;
}

@keyframes spin {
        to {
                transform: rotate(1turn);
        }
}
div:hover {
        animation: spin 1s linear infinite;
}

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

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

Код HTML

<div ontouchstart="">Hover over me and watch me spin!</div>

Код CSS

/** * Интересный вариант анимации при наведении указателя мыши */

div {
        width: 9em;
        padding: .6em 1em;
        margin: 2em auto;
        background: yellowgreen;
        animation: spin 1s linear infinite;
        animation-play-state: paused;
}

@keyframes spin {
        to {
                transform: rotate(1turn);
        }
}
div:hover {
        animation-play-state: running;
}

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

Этот вариант анимации был применен при создании сайта для Julian Cheal. К сожалению, он не отображается, как задумано, в браузере Internet Explorer. Кроме анимации, рекомендуем обратить внимание на кнопки-пуговицы на чистом CSS и кожаную рамку изображения. Подбор цветов сайта и твидовый фон создала Laura Kalbag.

Автор урока Lea Verou

Перевод — Дежурка

Смотрите также:




Комментарии

  1. Андрей
    Thumb up Thumb down 0

    Ну и непонятно из урока как добиться анимации как на последнем примере с сайта Julian Cheal с кнопками-пуговицами.

    Как сделать, чтобы анимация плавно возвращалась в исходное состояние при отводе курсора?