animation-play-state в CSS


Содержание

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:
  • Initial: running
  • Applies To: all elements; and ::before and ::after pseudo-elements
  • Animatable: no
  • 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 . ��� ���� ��� ���������� �������� �� �����, �� ������ ������������ ����� ������������ ������� ��������� ��������, � ����� ������ �� � �����, �������� ��������� ���� ��������������� � ������� ���������� �� �� �����.

    Илон Маск рекомендует:  Использование JSON с JavaScript
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL