Мы уже рассказали о большей части свойств анимаций CSS3, но есть еще несколько свойств, о которых знают немногие разработчики. Этот материал является продолжением серии, публикацию которой мы начали ранее. В этом уроке вы узнаете о продвинутых эффектах анимации и сможете применить их в своих новых проектах.

Приостановка и возобновление анимаций 

Свойство animation-play-state может приостановить или возобновить анимацию. У него может быть одно из двух значений:

• running — значение по умолчанию, анимация проигрывается как обычно.
• paused — анимация приостановлена.

Обычно применяется animation-play-state: paused как реакция на действие пользователя, например, при наведении указателя мыши или выделении анимированного элемента:

#myelement:hover, #myelement:focus
{
    animation-play-state: paused;
} 

Анимация продолжается с того момента, где она остановилась, когда указатель мыши отведен или выделение снято.

В уроке «Движущийся текст из фильма «Звездные войны» с использованием CSS3» может быть сложно успеть прочитать быстро удаляющийся текст. Конечно, в кинотеатре такого не сделать, но хотя бы в браузере мы можем остановить прокрутку, когда пользователь наводит указатель мыши на текст:

#titlecontent:hover
{
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

Посмотрите демонстрацию работы движущегося текста из фильма «Звездные войны» с использованием приостановки и возобновления анимации.

Для создания этих эффектов код Javascript не использовался.

Множественное анимации 

Можно применить несколько анимаций, как и переходов, к одному элементу. Они проигрываются одновременно, а не становятся в очередь, как можно было бы ожидать от скриптов jQuery или других библиотек Javascript. Значения для разных анимаций разделяются запятой, и не забывайте, что значения будут использоваться по кругу, если Вы укажите не все. Например:

#myelement
{
    animation-name: colorchange, sizechange;
    animation-duration: 5s, 2s;
    animation-timing-function: linear, ease;
    animation-delay: 0s, 5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Этот код CSS:

1. Запустит изменяющую анимацию под названием colorchange (изменение цветов), используя линейную функцию времени, на 5 секунд, и начнется сразу.
2. Запустит изменяющую анимацию под названием sizechange (изменение размера), используя функцию времени ease, на 2 секунды, и начнется через 5 секунд.

Эти анимации будут происходить бесконечно, и их направление будет меняться.

Посмотрите демонстрацию работы множественных анимаций.

Вы, вероятно, обратили внимание, что изменение цвета происходит на 5 секунд раньше, чем изменение размера, мы также добавили свойство animation-play-state: paused для момента, когда пользователь наводит указатель мыши на анимацию. Эта анимация создана, чтобы показать возможности свойств анимаций, Вы точно сможете придумать что-то более интересное.

Автор урока Craig Buckler

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

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