Усовершенствованные анимационные эффекты CSS3

Теперь мы рассмотрели большинство свойств анимации CSS3, но есть еще одно, о котором знают немногие разработчики…

Приостановка и перезапуск анимации

Свойство animation-play-state Он принимает либо:

• running анимация играет как обычно
• paused

Как правило, вы можете применить animation-play-state: paused

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

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

Рассмотрим мой текст прокрутки в Star Wars в CSS3 . Это было просто забавно, но некоторым пользователям было бы трудно читать текст со скоростью, которую он прокручивает. Крики на проекциониста выкинут вас из кинотеатра, но по крайней мере мы можем приостановить прокрутку в браузере, когда пользователь наводит курсор на текст:

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

Просмотрите названия «Звездных войн» с паузой и перезапуском…

JavaScript не нужен, и Ewoks не пострадали при создании этого кода (хотя я сделал «яблочко» на крысу с грызунами и ударил Гунгана).

Несколько анимаций

Подобно переходам, вы можете применять несколько анимаций к одному элементу. Они воспроизводятся одновременно — они не стоят в очереди, как вы ожидаете в 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;
}

Эта:

1. запускает чередующуюся анимацию «смены цвета» с использованием функции линейной синхронизации в течение пяти секунд и запускается немедленно, и
2. запускает чередующуюся анимацию «изменения размера» с использованием функции замедления в течение двух секунд, но запускается через пять секунд.

Просмотр демонстрации нескольких анимаций …

Вы заметите, что изменение цвета происходит за пять секунд до начала изменения размера (я также добавил animation-play-state: paused Да, это ужасно — я уверен, что вы можете придумать лучшие примеры!