Несложно сделать анимацию 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

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

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

• Создание кругового движения элемента
• Создание рейтинга в виде звезд с использованием только CSS
• Создание анимированной зимней шапки сайта с использованием CSS3