CSS animation-play-state
The CSS animation-play-state property allows you to specify whether an animation is running or paused.
An animation that is running can be paused by setting the animation-play-state property to paused . To continue running the animation, the property can be set to running .
This property can be used by scripts — such as JavaScript — to run/pause an animation or to find out what state the animation is currently in (i.e. running or paused ).
A paused animation will continue to display the current value of the animation in a static state, as if the time of the animation is constant. When a paused animation is resumed, it restarts from the current value, not necessarily from the beginning of the animation.
Syntax
CSS Syntax:
JavaScript Syntax:
Possible Values
In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:
initial Represents the value specified as the property’s initial value. inherit Represents the computed value of the property on the element’s parent. unset This value acts as either inherit or initial , depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.
Basic Property Information
Example Code
Basic CSS
JavaScript
Here’s an example of a script that can be used to change the animation play state:
Working Example within an HTML Document
CSS Specifications
- This property is defined in CSS Animations Level 1 (Editor’s Draft)
Browser Support
The following table provided by Caniuse.com shows the level of browser support for this feature.
Vendor Prefixes
For maximum browser compatibility many web developers add browser-specific properties by using extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -ms- for Internet Explorer, -moz- for Firefox, -o- for older versions of Opera etc. As with any CSS property, if a browser doesn’t support a proprietary extension, it will simply ignore it.
This practice is not recommended by the W3C, however in many cases, the only way you can test a property is to include the CSS extension that is compatible with your browser.
The major browser manufacturers generally strive to adhere to the W3C specifications, and when they support a non-prefixed property, they typically remove the prefixed version. Also, W3C advises vendors to remove their prefixes for properties that reach Candidate Recommendation status.
Many developers use Autoprefixer, which is a postprocessor for CSS. Autoprefixer automatically adds vendor prefixes to your CSS so that you don’t need to. It also removes old, unnecessary prefixes from your CSS.
You can also use Autoprefixer with preprocessors such as Less and Sass.
Свойство animation-play-state
Обратите внимание: данное свойство поддерживается в браузерах IE10+, Firefox и Opera. Для браузеров Chrome и Safari требуется префикс -webkit.
С помощью свойства animation-play-state Вы можете установить должна ли заданная анимация выполняться (значение running) или нет (paused).
�������� animation-play-stateCSS3-��������� ?
�������� ����������, ����������� �������� ��� ��������� � �� �����. ��� ����������� ������������� �� ����� �������� ��� ���������� � ���� ������� ��� ���� �����������.
������� ����������
�������� �� ��������� | running |
---|---|
����������� | ��� |
����������� | �� ���� ���������, � ��������������� ::before � ::after |
����������� | ��� |
��������� ?
�����������
�������� | ������ | |
---|---|---|
��������� ��� ��������. | ||
A && B | �������� ������ ���������� � ��������� �������. | && |
A | B | ���������, ��� ���� ������� ������ ���� �������� �� ������������ (A ��� B). | normal | small-caps |
A || B | ������ �������� ����� �������������� �������������� ��� ��������� � ������� � ������������ �������. | width || count |
[ ] | ���������� ��������. | [ crop || cross ] |
* | ��������� ���� ��� ������ ���. | [, ]* |
+ | ��������� ���� ��� ������ ���. | + |
? | ��������� ���, ����� ��� ������ �� �������� ������������. | inset? |
��������� �� ����� A, �� �� ����� B ���. | ||
# | ��������� ���� ��� ������ ��� ����� �������. | # |
��������
������
� ������ ������� ��� ��������� �� ����� ������� ���� �������� ������� ������ ���������������. ����� ������ ������ ������ � �������� ����������� � ���� �� ������ �����.
��������� ������
����������
Chrome, Safari � Andro >-webkit-animation-play-state .
Opera �� ������ 12.10 ������������ �������� -o-animation-play-state .
Firefox �� ������ 16 ������������ �������� -moz-animation-play-state .
������������ ?
������������ | ������ |
---|---|
CSS Animations | ������� ������ |
������������
������ ������������ �������� ��������� ������ ���������.
- Recommendation ( ������������ ) � ������������ �������� W3C � ������������� ��� ��������.
- Cand >��������� ������������ ) � ������, ���������� �� ��������, �������������, ��� �� ������������� ����� �����, �� ��������� ������ ���������� ������������� �� ���������� ���������.
- Proposed Recommendation ( ������������ ������������ ) � �� ���� ����� �������� ����������� �� ������������ ���������������� ������ W3C ��� �������������� �����������.
- Working Draft ( ������� ������ ) � ����� ������ ������ ��������� ����� ���������� � �������� �������� ��� ������������ �����������.
- Editor’s draft ( ������������ �������� ) � �������� ������ ��������� ����� �������� ������ ����������� �������.
- Draft ( �������� ������������ ) � ������ �������� ������ ���������.
��������: ���������� ��������� ?
Internet Explorer | Chrome | Opera | Safari | Firefox | ||
10 | 3 | 12 | 12.10 | 4 | 5 | 16 |
Android | Firefox Mobile | Opera Mobile | Safari Mobile | ||
2 | 5 | 16 | 12 | 12.10 | 4 |
��������
� ������� ��������� ����������� ��������� �����������.
- � ������� ��������� �������������� ���������;
- � ������� ��������� �� �������������� � ������������;
- � ��� ������ �������� ��������� ��������� ������, ���� ������� �������������� � ����������.
����� ��������� ������ ��������, ������� � ������� ������� ��������������.
Animation-play-state � CSS
New! My 44-page ebook «CSS in 44 minutes» is out! ??
# animation-play-state
Defines if an animation is playing or not.
default animation-play-state: running;
If the animation-duration and animation-name are defined, the animation will start playing automatically.
The animation is set paused at the first keyframe.
This is different than having either no animation-duration or animation-name at all. If the animation is paused, the style applied is that of the first keyframe, and not the default style.
In this example, the square is visible by default, but the on the first keyframe of fadeAndMove , the opacity is set to 0 . When paused, the animation will be «stuck» on this first keyframe, and will thus be invisible.
animation-play-state
�������� animation-play-state ����� ��������� ��������, ������������� ��� ��������������.
����� ��������
����� �������� ������������������, ��� ��������� ��� �������� ������� �� ������� ������ ����� �� � ���������. �� ���� ������� ���������� ��������� ���, ��� �� �������� �� ������ ��������� ��������. ����� ��������������� �������� �������������� (��������� � �����), ��� ������������ � ���� �� ����� ��� ���� ����������� ���������.
��������� ��������
- ���������:
- �������� �� ���������: running
- �����������: �� ���� ��������� � ��������������� ::before � ::after
- �����������: ���
- �����������: ���
�������� ��������
- running — ����� �������� animation-play-state ����������� � running , �������� �������������� ��� ������.
- paused — ����� �������� animation-play-state ����������� � paused , �������� ���������������� ��� ���������������.
��������� ����������
CSS Animation
����������
�� ������ ������� ���� ��� ���������, ���������� ��������, �������� � animation-play-state . ����� �� �������������� ������ ��������, ���� ������ ������ �������������� �� ������� �������� ��������������� ������� ���������� ���������� � ���������, ������ ��� animation-delay, animation-timing-function � animation-name, � �������. ������ ������ �������� � ���� ��������� �������������� ��� ������, � ������� � ������� �������� ���� ����������� ������. ����� ����� �������� �� ������� �������������� �� ��������� �� ������� ������.
�������� animation-play-state ������ ����������� ��� ����� ������������ �������� animation.
animation-play-state
The animation-play-state property specifies whether a CSS animation is running or paused.
When an animation is paused, the animation continues to apply to the element with the progress it had made before being paused. This means that whatever values the animation has reached will still be applied to the element while the animation is paused. When unpaused (set back to running), it restarts from where it left off, as if the �clock� that controls the animation had stopped and started again.
You can specify one or multiple comma-separated animation-play-state values. When you provide a list of comma-separated values, this list is usually mapped to a list of values provided by other animation-related properties, such as the animation-delay , animation-timing-function , and animation-name properties, among others. Each list of values in these properties is treated kind of like an array, where each value in a list of values has its own index. Then, each value in a list of values is mapped to its corresponding value with the same index in the list provided in the other properties.
For example, if you provide two animation-play-state values, then the first value determines the play state of the animation of the first animation in the list of animation names provided by animation-name , and the second play state specifies the play state of the second animation.
Trivia & Notes
The animation play state of an animation may be set dynamically using JavaScript depending on certain user interactions with the element or the page. See the live demo section below for an example.
Official Syntax
- Syntax:
Values
Examples
The following pauses an animation of an element to paused while another animation is running:
Live Demo
Click on the button in the following demo to toggle the �paused� play state of the animation.
Browser Support
CSS Animation
Complex method of animating certain properties of an element
CSS-�������� ��������
������� ������ Making Animations Wait �� Donovan Hutchinson.
������� � �������� ���� �� CSS-�������� ��� ���������� � �������������, ������� ����� ����������������� ���� ������ � ���-��������. ����� � ������� ��� ������, � ���������� � ���������, ����� �������� �������� ���������� �� ����, ��� ���������� �����. � ���� ������ ������ �����, ������� � ��������� ��� ������� ���� ��������, � ������� �����������, ��� ��� �������� �������� �����, ����� ��������.
�� ����� ����� ������. ��������, �� �����, ����� ��� hero header ������ ��������� ��� ��������, ������� �� ��������� fade-in keyframes, ����������� ��������, �� ��� ���� �������� ���������� �� ����, ��� ���������� ������� ����������� ����� �����. � ���������� �� �������� ������ ������������ ��������������� ��������, ��� ���� ���� � ��� ������� ��� ��������� ���������� �� ����, ��� ����������� ���.
� �������, ���� ������, ������� ������� ��� ���������.
��������: ������������ �������
����� �� ������� �� ����, ������� �������� ������� ��� ��� ������, ��� �����: �� ��������� � �������� HTML � CSS � � �� �� ����� ��������� ������ ����������� �����, ����� ��� ��������.
���� ������ �������� ��������, ��� �� ����� ����� ����� ������� ��������� ���� � ��������� �������, ��, ���� �� ����� ������� ����� ����������� ����, �� ����������� ����� �� ������������ �������.
������� ���������� ��������� ���������� ���������� �����, ����� ������������� �������� �� ����� �������.
������� load � �������� animation-play-state
�������� �������� ��� ������� javascript-������� load, ����� ���� ������� ��������. ��� ������� ����� ����������� � ��� ���������, ����� ��� �������� � �������. �� ����� ������������ ��� ��� ���������� ����� ���������.
�� ���������� ������������ ������ ��� ��������� ������� load � CSS-�������� animation-play-state ��� ������������ �������� ���� ������� �� ����������.
��� ���� ������
� ������ ������ � �������� body ����������� ����� js-loading.
����� ��������������� ��������� �������.
����� ���������� ������� load, ����������� ������� removeLoadingClass. � ���� ������ ��� ��� �������� � ������ ����� ����� ���������.
� �������, ������� removeLoadingClass ������� � body ����� js-loading.
���� ��� ����� ���������� � head ������ �����. ���� ��� ������� �� ���������� �����, �� CSS ����� ����������� ������, ��� ��������� ���� ������, ��� ���� ����������� �������� �������� ������ �������.
����� ������������ ���� ����� ��� ������������ ���� �������� �� ��������, ���� �� ���������� ���� �������.
�������� ������ �����������
��������� ���� ����� ���� ���� ���������� ��� ����� ��� ��������. ��������, �� ������ ��������� ������ �������� ������ �����������, �������� ��� ������ header. � �������, ������� �������� �������� � ��� ������ �������� ��������. � ���� ����� ������ ������, ��������� � ������ Measuring Image Widths in JavaScript.
�� ����� ���������� ����� �� ���� ���������� �����������.
�������� animation-play-state
�������� animation-play-state ������ �������������� ������������ ����������. ��� ������� ��������, ����� ������� �������� ����� ��������� ��� ����������. �� ��������� �������� ��������.
�� ����� ������������ ��� ��������, ����� ��������� ����� �������� �� �������� ��� �����, ���� ����������� �������. ������� ����� ��� � CSS
��� ��� ���������������� ��� �������� �� ��������, ���� � body ���� ����� js-loading. �� ����������� ����� �� ��� ���������������: before �: after.
����� ������ ������� ����� js-loading � body, CSS-������� �� ����������� � ��� �������� ����������� � ������ ������.
�������� ����� ����� ������ � ���, ��� �� ����� ������ ������ � ����� ������.
��� ���� js �� ���������?
��� ������, ������� ������ ����� ��������, ���� �� ���������� javascript ��� ������ � ���������. ������ js ����������. �� ����� ���� ��������. ������� ����� ������ �������������� ����. ���� � ����������� ������� ��� ��������, javascript ������ ������� �� ��� ����� ���������, ������� ������ �� �������� � ���, ��� ����������, ���� �� �� ����� �������� ���, ��� ���������.
� ���� ������ � ��� ��� ������. ���� javascript �� ���������, �� �� ��������� ����� js-loading, � �������� ��������� �����. ��� ����� ���� ������� �������� ���������, ����� ������� �������� ����������� �� ����� ��������, �� ��� ��������� �������� � �������� �������� �������.
��������� � ��������
������� ��������� �� �����, ��� ��� ��������. ��� ����� ������� ��������. ��������, Nasa photo on Unsplash, �� ������ ����� 2 ��.
�������, ���� ����������� ��������, �� ����� ������ ������ �����. ����� ��-���������� ������� ��� � ��������, ����� ������������ ���������� �������� � Chrome. ��������� ���������, �������� ������� Network, ����� � ���������� ���� �������� ��������� �������� ��������. ������� Good 3G, ������� ���������� ���������, ����� ������� ������ ������ �������.
������� �Rerun� �� ����-�������, � �� �������, ��� �������� �� �����, ���� �� ���������� �����������. ����� ����������� ����� ��������� javascript (� ��������� ��� ����� �������������), ����� ������� �������.
��������� ��������
���� �� ������ �������� ������ ��������, �� ������ ������������ �����-������ ���������� ����� ��� ��������, ������� ���� ������������� �����, ��� ����������. ����� ������� �� ����, ��� ����� �� ������ ������ ����� ����������� ��������. ���� � ��� ����������� ������� ����������� � �������� ����� ����� ��� 1-2 �������, �� ��������� ����� ������� ���������.
� ������ �������, �������� ����� ����� ��������� ����������� ��� ��������� ��� ���, ����� �������� ���� �������. ����������������� � ��������, ����� ������� ����� ����� ��� ���.
Animation-play-state � CSS
Css module of single purpose classes for animation play state
200 | 8 | 16 |
---|---|---|
bytes | selectors | declarations |
Learn more about using css installed with npm:
Import the css module
Then process the css using the tachyons-cli
The easiest and most simple way to use the css is to use the cdn hosted version. Include it in the head of your html with:
The built css is located in the css directory. It contains an unminified and minified version. You can either cut and paste that css or link to it directly in your html.
The source css files can be found in the src directory. Running $ npm start will process the source css and place the built css in the css directory.
��� CSS
Css Animation
�������� animation ��������� ����������� �������� ��������.
����� ��������� ������������� ��������, �����������, ������������, ����� �������� � ������. ����������� ����� ����� ��������, � ��� ����� ������-��������.
������������ ������� � ������� ���������� ��������. �������� �� ��������� auto �� �����������.
������ � ��������� ����� �� ������������ �������� ���������������, ��� ��������� ������ �������������� ������� ����������
������ ���� ��������:
move � ��� �������� 15s � ������������ infinite � ����������� ���������� linear � ��� ��������
@keyframes
���� �������� �������� ������ ����� @keyframes . ����� @keyframes �������� ��� ��������, � ����� ������ �������� ������ � � ����.
���� ����� �������� ����� �������� ��� � ������� �������� ���� from � to . ��� ���� � ����� ����� ������ ��� �������� ( animation-timing-function ):
Animation-name
������������ ��� ������� ����� ��������.
��������� ��������: ���� ��� ��������� ���� ��������. �������� �� ���������: ���.
animation-name: move; � ���� ��������. animation-name: move, sun-color; � ��� ��������, ����� �������� ����� �������.
Animation-duration
������������� �������� ��������� �������� animation-duration .
��������� ��������: ����� � �������� (s) ��� ������������� (ms). � ������ ���������� �������� ����� ��� ������ �� ��� ����� ������ ����� �������. �������� �������� � 0s.
Animation-timing-function
�������� ���������� ��� ��������.
������� �������� ease � ���������� (�������� �� ���������) linear � ������ �������� ease-in � ��������� � ����� ease-out � ��������� � ������ ease-in-out � ����� ������� ����������, ��� ease
cubic-bezier(�����,�����,�����,�����) ��������� �������� ������� ��� ��������. �������� ������ ��������� �� cubic-bezier.com.
��������� �������� step-start � step-end � ��������� ������ ��������� ��������, ����������� �������� ���������� ����. ��� ���� � step-start ��������� ���������� � ������ ����, � � step-end � � �����.
step-end . ���� ��������� step-start , ������� ����� ���������� � ������.
steps(�����) � ��������� ������ ���������� �����, �� ������� ����� ��������� ��������, ��� ���� ����� ������ ������ ��������� ��� ��� ������������� ��������� �������������.
Animation-iteration-count
��������� ����������� ��������. �������� �� ���������: 1 (�������� ������������� ���� ���).
����� � ������� ��� ��������� ��������. infinite � ����������� ����������.
Animation-direction
�������� �� ����������� ��������.
normal � �������� ������������� � ������� �����������, � ������ � �� �����. reverse � �������� ������������� � �������� �����������, �� ���� � �����. alternate � �������� ������������� � ������ � �� �����, � ����� � �������� �����������. alternate-reverse � �������� ������������� � ����� �� ������, � ����� � �������� �����������.
Animation-play-state
��������� ���������� � ������������� ��������.
��������� ��������: running � �������� ������������� (�������� �� ���������). paused � �������� ��������� �� ������ ����.
��������� �����, ��� ����� ���������, �� ����������, �� ����� ������������� �������� �� :hover :
Animation-delay
� ������� animation-delay ����� �������� �������� �������� ����� ������� ���������������.
��������� ��������: ����� � �������� (s) ��� ������������� (ms). �������� ����� ���� ��������������. � ������ ���������� �������� ����� ��� ������ �� ��� ����� ������ ����� �������. �������� �������� � 0s.
Animation-fill-mode
�������� ���������� ����� �� �������� �������������� �� ������� ��� ������� ��������������� ��������.
none � �������� ������������ �� ������� ������ �� ����� ���������������, �� ��������� ������� ������������ � �������� ���������. forwards � �������� ������������ �� ������� �� ��������� ���������������. backwards � �������� ������������ �� ������� �� ������ ���������������. both � �������� ������������ �� ������� � �� ������, � ����� ��������� ���������������.
����� ������� ��� backwards � both �������� �� ������ ��������������� ��������, ������ �������� animation-delay: 3s; . ��� �� ��� ����� ����� ����� ������� ������ � ����� ����.
��� ��� �������� ����� �������� � ������� �������� ������, ��������:
������������ �������� � ��� �������� � ������������. ������ ��������� �������� ��������� ������������� ���������������, ������ � ���������.
CSS :: �������� animation-play-state
css -�������� animation-play-state (�� ����. animation play state � ��������� ������������ ��������) ������������ ��� ������ ���� ���������� �������� �� �����. �������� �������� �������� �����, ��������, ��� ������ JavaScript . ��� ���� ��� ���������� �������� �� �����, �� ������ ������������ ����� ������������ ������� ��������� ��������, � ����� ������ �� � �����, �������� ��������� ���� ��������������� � ������� ���������� �� �� �����.