html.okpython.net
Основы создания сайтов
CSS :: Свойство animation-play-state
css-свойство animation-play-state (от англ. animation play state – состояние проигрывания анимации) используется для снятия либо постановки анимации на паузу. Изменять значение свойства можно, например, при помощи JavaScript. При этом при постановке анимации на паузу, на экране пользователя будет отображаться текущее состояние анимации, а после снятия ее с паузы, анимация продолжит свое воспроизведение с момента постановки ее на паузу.
Характеристики
- Значение по умолчанию: running.
- Применяется: ко всем элементам, а также к псевдоэлементам ::before и ::after.
- Наследуется: нет.
- Анимируется: нет.
- JavaScript: object.style.animationPlayState="value".
Синтаксис
animation-play-state: running | paused
Значения
- running – анимация проигрывается.
- paused – анимация поставлена на паузу.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css-animations-1/#animation-play-state
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/animation-play-state
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> div{ margin-top: 3em; overflow: hidden; white-space: nowrap; padding: 1em; width: 460px; height: 110px; border: solid 4px red; } /* Задаем свойства анимации */ #anim{ animation-name: example_1, example_2; animation-duration: 3s; animation-timing-function: ease-in-out; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: alternate; animation-fill-mode: backwards; animation-play-state: paused; } @keyframes example_1{ 0% { background: #ff0000; height: 50px; } 50% { background: #00ff00; height: 400px; } 100% { background: #0000ff; height: 200px; } } @keyframes example_2{ from { width: 150px; } to { width: 500px; } } </style> </head> <body> <div id="anim" onclick="playAnim()"></div> <script> function playAnim(){ //Находим наш анимируемый блок var animElem=document.getElementById('anim'); //Если анимация запущена if(getComputedStyle(animElem).getPropertyValue('animation-play-state')=='running'){ //то ставим ее на паузу animElem.style.animationPlayState='paused'; //иначе }else{ //запускаем анимацию animElem.style.animationPlayState='running'; } } </script> </body> </html>
Пример №1