animation-iteration-count в CSS


Содержание

��� 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-iteration-count

�������� animation-iteration-count � CSS ������������ ��� �������� ���������� ���������� ��������. ����� ������� ��� �����������, ����� ��������� �������� �� �������������.

���������:

��������� ���������:

  • �����: ��� �������� �������� ������������, ����� ����������, ������� ��� �������� ������ ���� ��������������. ��������� �� ��������� �������� 1.
  • �������������: ��� �������� �������� ���������, ��� �������� ������ ���������������� ����������� ���������� ��� (��������).
  • initial: ��� �������� �������� ������������, ����� ���������� ��� ����� �������� �������� �� ���������.
  • �����������: ��� �������� ������������ ��� ������������ ����� �������� �� ��� ������������� ��������.

�������� animation-iteration-count

�������� animation-iteration-count ���������� ���������� ������ �������� (����� ������� ��������� ����� �������).

������� �������� ������ ����������� �� ����� � ������� �������, � ������������� �������������� � 0.

���������� ��������

  • � �������� ������������� �������� ���������� ���

  • infinite � �������� ������������� ����������� ����� ���
�������� �� ��������� 1
��������� � ������� � �������� ���������
������������ ���
������ CSS CSS 3
�������������� ����������

������

���� ���:
���������:

�������

��� �������� ��������� � ������ CSS Animations Module Level 3 ����������� � ���������� W3C, ������� � ��� �������� ����������.

Safari 4.0 � ���� Chrome 3.0 � ���� ������������ ����������� �������� -webkit-animation-iteration-count, � ����� ������������ ����������� ���������� ������ �������� � ������� ��������� ����� @-webkit-keyframes.

�������� animation-iteration-count

�� ��������� �������� �� ���-�������� ������������� ���� ���, ����� ���� ���������������. � �������, � CSS ������� ����������, � ������� �������� ����� ��������� ����������� ���������� ��������. �������� ���������� animation-iteration-count � ��������� ��������� ��������:

  • ����� � �� ���������� ������������ �����, ������� ����������, ������� ��� ���������� ��������. ����� ����� ����� ����� ������������ � �������, � ��� ����� ������ �������. � �������, ����� 0.25 ��������, ��� ����� �������������� �������� ������ ����� ��������, � ����� 3 � ��� �������� ���������� ��� ����.
  • infinite � �������� �����, ������� �������� ����������� ���������� ��������.

�������� ������������ ����� � ������� ������� ������������ ��������:

��� � ������, ��� ������ �� ����������, ������� ��������� � �������� CSS3, ����������� ������������� ��������� ��������������, ����� ��� -webkit- , -o- , -moz- .

����� � ��������: �������� animation-direction ��� ��������� ����������� ��������.

��� � CSS ���������

����� �� ���� �������� ������� ������� � HTML �������� �������������, ��� ����������, CSS ��������. ������� �� ������ ���������� �����. ��� ������������� ����������� ����������� �������� CSS ��� ���������, ������� ��������� ��� �� ��������.

��� ��������� ��� ��������� ������������ �������� �����, ��������, ���������� ������� ���������, �������� � ����������, �������� ���� � �.�.

������ ������� �������� �� ������. ���� �������� CSS ��������, ������� ���� ��������� � ���� �������, �������� �� ������ ������������ ����� � ����.

� ������ ����� �� ������� ��� � CSS ��������� ��� ����, ����� ��������� �� ������ ���-�� �������, �������� ���������� �������, �� � ���-�� �����, �������� � �.�. �� �������, ��� ���������� CSS �������� � ������� �������� animation, ��� �������� � ��������� �������, � ��� � ������� �� ��������� � �� ��������, ������� �������� � ���������, ����� ��������� ���� �������� ������ � �������� ��, ��� �� ������.

�������� ������� ��������

����� ������� (� ����� �������) ������ ������ � CSS ��������� � ������ ����� ������� ����� ����������� ���� � ����� �����������, ��� ��� ��� ��������. ����, ��������� ������. ������� ����� HTML �������� � ��������� ��������� HTML � CSS ���:

���� �� �������� ��������������� ��������, �� ������� ���� ����� ������������� ������ �������, �������� �� ������ �����.

�� ������� ���������, ��������� �� ������ ������, ������� ���������� ����������:

������� ��������� � ������� ��������, ����� �� ������� �� �����. ���������� �������� CSS ����������� � ��� ����. ������ ��� � ��� ��������� �������� animation, � ������ � ���������� �������� �����, ������� ����������, ��� ������ ����� ����������� .

� ��������� �������� ������� ������� ����� #bigCloud � �������� ��������� ���������� ������:

��������� ������ ���� ������ �� �����, �� ����������� � ��� �����, ����� ����� �����. � ���� ��� ������� ������� �������� �����.

���� ������ � ��������� ��������� ������� ����� @keyframes :

��� ������ �� �������� ��� ������� �����, ����������� ���� ��������. �� ������ ������� ���� ������ �������������� �� �������, ������ � ���� ��� ������� ����� � ���� ����. �����!

��� ��� ����

��, ��� �� ������ ��� �������, ���� ����������� CSS ��������, ����������� ���� ������ �������. CSS �������� ��������� ������. ��� ��������� ��� ���������� ��������� ���������, ��������� ������������� ��������� (��� �� �������� �����) � �������� ��������� ������� ���� ��������, ������� �� ������� �������. �������� ������ ������ ����� �������, ������� �������� ����, ��� ��� � ������� �, �������� �������� ������� ��� �����������.

Илон Маск рекомендует:  Что такое код windowfrompoint

������, �� ��� �� ������� ��������, ���� �������� animation:
animation: bobble 2s infinite ;

�������� animation ������������ �� ��������� ����� ��������. � ����������� ��������, ������� �� ������ ������ ������������, �� ������ ��������� ��������� 3 ��������:

  • ��� ����� ��������;
  • �����������������;
  • ���������� ���������� ��������.

���������� ����� �������� ����� �� ����������. ��� �������� � bobble , ����������������� � 2 �������, � ��� ��������� �� ����������� ����������.

� ��� ������ ��������� ���������?

�������� animation �������� �����, ������� ������ �������� ������� ������������ � ��� ��������� �������, ����� ������ �������� �������� ���������� �������. �� ����������� ���� ���� ��������. ������ ����� ����������� ���-������ ����� -prefix- free library , ��� � ����� �������, ����� ��������� ���� �������� ������� � � �� �� ����� ��������� ���������� ��������� �������������� ���� ��������.

��� �� ������ �������, ���������� �������� �� �������� ����� ������� � ���, ��� �� ����� �����������. ��� ������������� ��������������� ����������� ����, ��� ���� �������� ����� ������, �� �������� ����� CSS �������� ��������� � �� ������� @keyframes .

������� �������� �� ���� ������� @keyframes ��� ����� ��������� ���������:

������ ������, ������� ����� �� ��������� � �����, ��� ��������� �������. ������� ������� �������� ���������� @keyframes �� ��������� ����� ������:

������ ��������� ������� ������ (��� �������� �����), ��� ��������� ����� ���� �������� ���� � ���������, ���� � �������������� �������� ���� from � to .

��� ������� ����� �������� ������ ������ ������� ������, ��� �� ����� �� ���� �����������. ��� �������� ������ ����� CSS �������� ��� transform � animation-timing-function , �������� ������� ����� ���������, ����� ������� ������ ��������. �� ��� �������� � ����� �������, � ���� ���� ���� ������ ������ � �������� ����� �������� ������, � ������� ��� ����� �����������.

����, ���, ��� � �������� �� �����, ���� ������ ��� ���������. � ������ ������� ���-���, � ��� ��������� ����������. �������� �� ��, ��� �������� animation ���� ��������� � ����� ������� �����, � ���� �������� ����� � � ������� @keyframes , ��� ����� ����� ������� ���� � ������, � ���� �� ������������� � ���������� �������.

��������, ��� ���� �� ����� ����������, ���� �� �� ���� ��� ������ � ��������. �� ���� ������ � ����������� � ���, ����� ����������� � ����������, ��������, ��� ����������, �, � ����� ������, ��������� ��� ������� ���������� ��� ����� ����������� ������.

������� ������� ����������, ��� �������� animation � ������� @keyframes ������� ���� � ������.
���

���, ������� �� ���� ������� @keyframes , ��������� � ���� ��������������, ������� ���������� �������� animation, ����� �����, ��� ��������� �������� �����:

��� ����� �� ����������, ��� ���� �������� animation ��������� �� bobble � ��� ������� @keyframes ���� bobble . ���� ���� �����-���� ������������ � ������, ���� �������� �� ����� ��������.

����������������� � �������� �����

�� ����������� ��������� �� ������, ����� ������� ���� �������� animation ����������� � ��� �������� ������. ����� �������, ���� ������� ���������. � ������ �� ��������� ����������� ��� ������� �����, ��������� � ������������������ �������� � �������� ��������, ����� ������� ����� ������������� ��������� ����� ���������� ��������.

��� �� �������, ����� �� ���������� ������� ����� �������� ������ ������ @keyframes , �������� �� ������� � �������� ��������� ��������. ��� ���� ���������� ��������, ���� �������� ����� from ��� to :

� ����� �������, ���������� �������� ��� ���������� �������� ������ � ��� 0%, 50% � 100%. ��� ������������ ����� ������� ����������� ��������. ����� �������� ������ ��������, � ��� ��������� 0% �� ��������. �������� ���� �0%� ������ ��������. ����� �������� ��������� ��������, �������� ���� � 50% � ���������� ��������. � �������, � ����� ��������, �������������� �������� ���� � 100% �.

� ��������� from/to

������ ����������� 0% � ���� ���������, �� ������ ������������ ������������� �������� ����� from. ��� 100% ���� �������� ����� to, ������� ���� ����� ������������ ��� ��������. �� ����� ����, � �� ����, ������ ���-���� ������� ��������������� ����, �� ��� �������� ����� ����������, � ���� �� ������ ����������� �� ���� ������, ��� ������� ����� �� �� �������������.


� ���� �����, � ����� �� ���� ��������� ���� �������� �������� ������ from � to. � ����� ������� ��� ���������� ������ ��� ����, � �� �� ������������� �� �� ����� ������ ����������.

�������� �����������������, ������� �� ����������� ��� �������� animation, ����� ��������� ������ ������� ��������������� ��������, ��� � �������� ��� ����������� ���������� �������� � ��������������� ��������� �������. ��� ������ � ��������.

���� ��������, ��� ���� ���������� �������� ����������� � ������������ ������� ��� ����� ������������� ��������:

����� ���� ��� ����� ������� � �����. ���� �� ��� ������, ��� ����������������� ������������ � ��������� �������� �����, �� �� ���������� ������� ����������� � ���������� ������������� �������� � ����� �����������.

� ����� ������, �� ���������� ���������� ��������, ��� �������� ������� CSS ��������. �� ������ ��� � ���, ��� �������� �������� � ������� �������� animation, � ��� �������� ������� @keyframes ������ � ��������� ����� �������� ������. ����� �� ��������� ������� ������� ��������� ����, ��� ��������� ����� ���� ������������� ���� � ������.

�� �� ��� �� ���������. ���� ���, � ��� ���������� ����� ��������. ������� �������� ��������� �������, ����� ���� � �������� ��������� ��� ����������� �������� CSS ��������!

��������� ������ �� CSS �������� animation

� �������� animation ���� ������� ������ ������������, ��� �� ������ ��� ������. ������, ����� �� ��� � ��������� ���� � � �������� ��������, ������� ������� ���-������ ����� ������������� � ������ ��� � �������� animation. ��� ������ �������� ���� ����������� �������� � ���������� ��� � ����������� ����. ���� ����������� ������ �������� ���:

��� �������� ����� ����������� ������ ������������ � animation-name , animation-duration � animation-iteration-count . ��, ��� ��� �������� ������, � ����� ������� ��� ������ ������ ����������� � ����� �����. ������� ������� ��������� ������ � �������� � �������, ������������ �� ��������, ������� �� ��� �� �������������, � ������: animation-play-state , animation-delay , animation-direction , animation-fill-mode � animation-timing-function .

����� � ������������� ��������

�� ��������� ���� �������� ��������, ����� ������� �����, ���������� �������� animation, ������ ��������. � ����� ������� ������ ��� ���������� �������� ������ �������� ��������. ��� ������ ������� ���������� ���������� ������������� ��������, ����������� �� ����������� ����������:

������ ������ ������������� ������������ ����� 1 �������� ����� ��������. ���� �� ��������� ������ �������� �������� ����� � ������, �� �������� �������� �� �� �����, ��� � ������ ����.

���� ���� �������� ��������, ��� �� �����������, ���� �� ��������� �����. ���� ���� �������� ���������, ��� ������ ��������� ����������� � ������, ��� ������ ��������� �����. ���� ���� � ������� � ���� ���������� ������� ��������������.

���� bobble �������� � ����� ������������� ������ ���������.

��������, ������ ��� �� ���������, ����� �������� ���� ���� �������� �������. ���� �� ������, ����� ���� �������� �� ���������� ��������������� ����� ����, ��� ������� �����, ���������� ����������� ����� ��������, ����� ��������, ��� ���� �� ������ ���������� ���� �������� ����������, �� ������ ����������� �� ��������� animation-play-state. ��� �������� ��������� ����������� ���� �������� �� ��������������� ��� �����, ����������� ����������� �� �������� running ��� �������� paused.

�� ��������� �������� animation-play-state ����������� � ��������� running (���������������). �� ������ ���������� �������� paused, ����� ������������� ����������:

����� �������� �����������, ��� ��������� ����� ��������� ����������� ��������:

����� ��� ����� ����� ������������. �� ������ ����������� ���, ��������� �������� animation-play-state ����� � running. ��� ���� �� ���������� ���������� �����������, ��� ���� �� �������� ��������� ������� � ������� 0% ����� ��������������:

���� �������� ������ ����������� � ���� �����, ��� ��� ���� �������������� � ������� ����, ��� �� �� �������, ��������� ������� Play � Pause � �����������.

�������� � �������� ��������

���� �� ������, ����� �������� ����������������, �� �� ������ ������ � ������� ���������� ������� �������, �� �� �������� ������������� �� ��������� animation-delay . ��� �������� ��������� ����������, ������� ������ ������� ����� ������� ��������������� ��������.

�������� � ��� �� ��� ������, ����� ������������� �������� ���� 0%, � ����� �� ����� 5 ������. �������� ���������� ��� �� ����, ��� ����� ��������� �������� ���� 0% ����� ������ ��������:

����� ������ ��������������� ��������, �������� �������� ������ �� ������������. ������ ����������� �������� �������� (���� ���� �������) ������ ������ ���������� �� ����� ����� � ������ ������.

���� ��� ���-���, ��� ����� ������� � ���� ���������. ������ ����������� ������������� �������� ������� ��� animation-delay, �� ������ ������ � ��� �� ������� � ������������� ��������:

����� �� ������� ������������� ��������, ���� �������� ���������� ��� ��������, �� �� ��������� �������������, ������� �� ����������. ��� ��� ����� ��������� animation-delay �� ��������� -.25 �:

������������� ���� ������ ���� ������� ��� ��������, ������ ��� � ������������� ������������ ��� �������� ��� ��������, � �� ��������. ��, ��� ������� �������, ��������, ���� ����� �� ��������, ��� �������� ��-�������� ���������� animation-delay, ��, ��� ���������, �� ��� �����, �� �� � ������.

���-��� ����� ��������: ���� �� ���������� �������� ������, ��� ����������������� ��������� �������� ����� ��������, �� ������� ������� ��� �� �������. ���� �������� ������ ���������������� � ���� ����� ��������� ��������, ������� ������ �� ������.

Илон Маск рекомендует:  Как получить список все запущенных процессов и потоков

������ ��������������, ��� � ��� ���� ���������� �������� ��� ������� ������� ��������� �����. ���� �� � ��� ��� ������������ ���������� ��������, � �� ������ ������� ��������, ���� �������� �������� �� ����� ����������������.

���������� �������� �������� ������, ����������!

���� �� �� ������������ ��������, �� �� ��������, ��� ��� ������ �������� �����������, ����� ��������, ������������� ��������� �������, ������������, � ���� �������� ������������ � ������� ���������. ��� ���������� ������, ��� ��������, ����������� ��������� �������, �������� ����������.

��� ����������, ���� �������� ����� �������, �� � ����� ������ ������ ������� �������� ���� ������� �� �����������. ����� ����������, ��� ���� �������� �������� ������������� � ������� ������ ��� �������� ������������ ����� ������ ����������.

������� ��������� ��� ������� ����������� ������ � ����� ���������, ��� �������� ����� ��������� �� ���������.

�������� ������

������ ������ ����� �����, ����� �� ������ ���� � ���������� animation-delay. ��������, �����������, ��� �� ���������� 5-��������� ��������:

� ������� 5 ������ �������� �������� ����� ��������� � ���������� ���������. ����� ��������, ������������ � ������ �������� �����, �� ����� ���������, ���� �������� �������.

�������� ���������

������ ������ � ���, ����� ���� �������� �����������. ������, �� ������ 3 ������� ��� ����� ��������:

� ����� ��� ��������, ������������� ��������� �������� ������ �� 3-�� ��������, ��������. �������, ������� �� �����������, �������� � ���������, ��� ������ �� ����� ���������� �� ������� ����� ��������.

���������� � animation-fill-mode

���� �� ������, ����� �������� ���������� ��������� ����� ���� ��������� ��� �� ����� ��������, ��� �������� ���������� ��������� ����� ����������� �� ���������� ��������, �� ������ ���������� �������� animation-fill-mode . �� ������ ������ ����� ��������:

  • none
    ��� �������� ��-��������. ���� �� ������ ��������� �������� ������� ��������� �����, ���� �������� ���� ������ ���� �������;
  • forwards
    ����� ����, ��� �������� ����������, ����� �������� �������, ��������� � ����� ��������, ����� ���������;
  • backwards
    �������� �������� �������� ��� ������� �� ���������� ��������� �����, ���� ���� ���� ��� �� �������;
  • both .

��� ����������� �������. ���� �������� � �������� �������� � ��������� ������� ��������� ����� � ������, � �������� �������� ������� ���������� ��������� ����� � �����.

��������, ��������� ����, ��������� �� ����������� ���������� � �� ����� �������� � ������. ������ ������ ��������, ������� � ������, ���� �� ������ ����������� �� ��������� ������� � ��������� � �������� �������� ������ � ������������� ��������� � ��������� ��� ��������.

��� ������ � ������� �� �������� ����� ��������, ���������� �� ����, ������� � �� �� ������ ����������� ���� ���������� ��������� �������� animation-fill-mode, ���� �� �� ������ �����.

������ �������� (��� �������� �����������)

������ ������� ���������� � ����� ������� �������� ��������. �������� ��������������� �� ��������� ���������� �� 0% �� 100%. � ��� ���� ����������� �������� ����� �������, ��������� �������� animation-direction � ���� �� ��������� ���������: normal , reverse , alternate ��� alternate-reverse .

��, ��� ������ normal � reverse, ������ ���� � ��� �������, ������� ���������� ����� ���������� ��������: alternate � alternate-reverse.

����� �� �������������� �������� alternate-reverse ��� �������� animation-direction, ���� �������� ���������� ��� ������. ������� �� ������ ��������, ��� ������ ����������� �� ���������������, ��� ����������� ��� ������ ����������� ��������:

��������� animation-direction � ������ alternate ���� ������� � ��������� �������� ���������:

���� �������� �������� � �������, � ����� ����� ������ ����������� ����� ���������� � ���������������.

������, ������!

��������� ��������, ��������� � ���������, ������� �� �������, ��� animation-timing-function. ��� ������� �������� ��� ����������, ��� ���� �������� ����� ��������������� �������� ������� �� ������� ������� ����� ������� � ������. � ������ ������� ��������� ������� ����� �������� � ����� Easing Functions in CSS3 (������� ��������� � CSS3), ������� �� ��������� ����������� ����������� ����.

���������� ��������

��, ��� �� ������������� �� ��� ���, �������� ����������� ������� ������� ��� ���������� ��������:


���-��, ��������, ���������� ������������ ����������� ������ �������, ����� ��� �������� � �� �������� ������������ ������ ������ �������� animation. ����������, ��� �� �������, ���� �������� bobble ������������ � ����������� �����:

��� ����������� ��������, ������� �� ������ �� �����, ����� ���� ������������ � ����������� ����� � ������ ����� ��� ����� � �� �����������. ���� �� �� ������������ �� ���, �� ��� ��� �������� �� ������������������:

������ ����������� ��������������� �������� ��� ��������, ������������ � ������� ������. ��������, ��� �������� animation-play-state �� ����� ���� �������� � ����������� ��������. ��� ����� ����� ���� �������� ��� �������� � ��� ��������.

��� ��� �����, ������� ��� ����������� ������� �� �����������, �� ������� ���������:

����������� ������ �������� ����� ���������, ��� ������������� �� ����������� ������? ����������! ��� ����� �������? � ��� �� ���� ������ ������� ����� �����. ��� ������� �� ����� (��� ����� �������) ������������.

� ����������� ������� ��� �������� ������������ ����������� ������� ��� ����������� ������� animation-name , animation-duration � animation-timing-function , ������� ��� ����� ���������. ��� ������ � ������ �� ������� �������� ���� ���� �������, ��� ���������� ���������� � ������������, ����� ������, �� ��� ��������� �������������� ��������.

��� ������ � ���������� ������� ����� ������������� � ������ ����� �������� �� ����� ������ (����������� ��� �����������), ��� ��� ����������� ��, � ��� �� ���������� ���� ���������. ȅ�������� ������ ��� �����, ����� ����� ����������� � ��������� �������� �������� animation � ��������������� �� ������ ���������������������� ������ ������������� ����������� ����������� �� ������ ��������.

�������� �� �������� �����

������� ����� ������� �� �������, ���������� � �������� animation, � � ���, ��� ��� ������ �� ��������. � ��������� ����� CSS �������� � ��� �������� �����. ������� ������� ������ �� �������� �������� � ���� ������.

������ ������ (�����) �������� ������ bobble:

����� � ��������, ��� ��������� �������� ���� ����� ����� �� ������� �����. �� ���������� CSS �������� ������ ����, � ��� �������� ��������������, ����� �������� ��� ����� ��������� ����� ���������� ��������. ������� ��������, ��� �� ��� CSS �������� ����� ���� ���������� ������ ��������� �����. �� ������ ���������� ������ � ����������� � CSS �������� � �������� animation-timing-function .

��� �� ����� �� ������ �������, � ������, ��� ��������, ������� �� ������ ������������ � ����� �������� �����, ������ � ������ ����������� ��� ��������. �� ������ ���������� ������ ������ � ����������� � ������� ����� � ��������� �������������� ����� (�������� �������� �� �������� � �������, ���������� ��� Anim.)

���������, ��� ��� ����� ����������, ��� �������� animation-timing-function , ������� �� ����� ������ ������ � �������� �����.

��� �������� ���������� ������� �� �������� ��������� ����� � ���������. ��������� � ������ �������, � �������� ����� 0% animation-timing-function ����������� � �������� � ease-in:

��� ������� ������� ����� �������, ����� �������� �������� �� 0% � ���������� ��������� ����� � �������� 50%. ����� ����, animation-timing-function, ����������� � �������� ����� 50%, ������ �������� ��� �������� �� 50% � 100%. � ������ ����, ��� ������� ������� �������� ����� ������� �������� ������ � ���������, ���������� ��������� ������� � �������� ����� 100% �� ����� ������.

��������� ������������� �������� ������

� ���������, � ��� � ���� ����������, ��� ������������� ����� � ��� �� �������� ������ ��� ���������� ������ ��������. � ��� ������� �� ��, ��� �������������� ���������� �������� animation �� ������������ ������� @keyframes ������ ������ � ��������� ������� ���������. �� ���� � ����������� ����� ����� ���������� �������, ���� ������ �����������.

���� �� ����� �������� � ��� ����������� ���������� ������������� ���������� �������� ������ ��� ������ ���������� �������� animation. ����� ���� ��� ������ �����������, ������� ������� �������� ��� ������� ������, ����� �������� ��, � ��� � ������.

� ��� ������� HTML ��������, ���������� ������ ���� �������������� ������, �������� ���������� ������:

��� ������ �� �������� � ���������� ������� ����� #smallCloud , � ������ ������� img, �������� ��������������� �������� ��������. ���� ��� ���� ������� ���������, �� ������� ��� ��������� �������������� �������, ������� �� ��, ��� �� ������ � ������� � ������ ����� �����.

������, ����� ��� ������ ��������, ������� ���������, ��� �� ��� ��� �������. �������� ����������� � ���������� animation � ����� ������� ����� #smallCloud :

��������, ��� �� ��������� ����� �� �� ������� @keyframes �� ����� bobble. ������������ �������� ����� ���� ����������� �������� � ����������� � ������� ����� #bigCloud �������� �����������������. ����������������� ��������, ����������� � ���������� ������, � 4 �������, � 2 ���� ������, ��� � �������� ������:

��� ������, ��� ��������, ������� �� ���������� � �������� ������ bobble, ����� ��������� � ����� ����� �������. ������� ������ � ���, ��� � ����� �������� ��� �������� ����� ��������������� � ������� 2 ������, � � ������ � � ������� 4 ������:

������������� ����� ��������� ������� � ����������� �������� ��������� ��������� �������� ������. ����� ���������, ������� �� ������� � ���������� �������� animation, ����� ������ �� ���� �������� ����� ���� �� ������������� ������, ���, ��������, ��� ��������� � ������������������. ��� �������� ��������, ������� � �������� ����������� �������� �����, ����� ���� ���������� ����� �������, ��� ������� ��������� �������� ������, �� ������� �������� ����� ������. ���������, ���� ��� �����.

���������� ���������� ��������

� ��������� ���� (��-��, ������, ���������), ������� �� ��-�������� �������� � ��� �������� ��������� �������� � ����� �������� animation. � ����������� ����� ���������� �� ������ ����������� ������ �������� ����� �������, ��� ���:

Илон Маск рекомендует:  Тег figcaption

��������, ��� ������ �������� ��������� �� ������ ������� @keyframes . ���� �� �����-�� ������� �� ������ ��������� �� ���� � �� �� ������� @keyframes �� ������ ���������� �������� animation, �� �������� ������� ����������� � CSS, � ���� ������� ����� ��������� ����������.

�������� �������� � ����������� ������, �� �� ������� ���������:

�����-���� ����� ������ ��������. ��� � CSS ����������� � ������� �������, ������� ���� ������������, ��� �������� ��������� �������� ��� ��������, ��������������� ����� �������, ������ �������� �������.
����������

�������� animation � CSS � ��� ����� ������ ��������, � ������� ����� ����� ������, ��������, ���� �� ������ ������� ��� �������.

������ ���������� ������������ ����� ������� ������ � All About CSS Animations � , �������������� ������� �������� ������� ��������-����������.��

CSS animation-iteration-count

The CSS animation-iteration-count property allows you to specify how many iterations — or cycles — the animation will play. In other words, it determines how many times it loops before stopping.

For example, an animation-iteration-count of 5 will result in the animation repeating for 5 cycles/loops.

Specifying an animation-iteration-count of infinite results in the animation repeating forever.

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

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-iteration-count

Обратите внимание: данное свойство поддерживается в браузерах IE10+, Firefox и Opera. Для браузеров Chrome и Safari требуется префикс -webkit.

С помощью свойства animation-iteration-count Вы можете установить количество повторов анимации.

Количество повторов может устанавливаться с помощью ключевого слова infinite обозначающего, что анимация должна повторяться бесконечно.

CSS3 �������� animation-iteration-count

������

������������� �������� ��� ����:

animation-iteration-count:3;
-moz-animation-iteration-count:3; /* Firefox */
-webkit-animation-iteration-count:3; /*Safari � Chrome*/

���������� ���� �

��������� ����������

�������� animation-iteration-count �� �������������� �� ����� ���������.

Firefox ������������ �������������� �������� -moz-animation-iteration-count.

Safari � Chrome ������������ �������������� �������� -webkit-animation-iteration-count.

����������� � �������������

�������� animation-iteration-count ����������, ������� ��� �������� ������ ���� ��������������.

animation-iteration-count

�������� animation-iteration-count ������������ ��� �������� ���������� ������������ ������ ������� ���������� ��������.

����� ��������

�������� �� ��������� ����� �1�, � ��� �������� ��� �������� ����� ������������� ����� ���� ���.

��� �������� ����� ������������ ��������� �� ��������� animation-direction � �������� alternate , ��� �������� � ��������� ��������������� �������� �� �������������� ������.

��������� ��������

  • ���������:
  • �������� �� ���������: 1
  • �����������: ���� ��������� � ��������������� ::before � ::after
  • �����������: ���
  • �����������: ���

�������� ��������

  • infinite — �������� ����� ����������� ����������.

��������� ����������

CSS Animation

����������

�� ������ ������� ���� ��� ���������, ���������� ��������, �������� � animation-iteration-count . ����� �� �������������� ������ ��������, ���� ������ ������ �������������� �� ������� �������� ��������������� ������� ���������� ���������� � ���������, ������ ��� animation-delay, animation-timing-function � animation-name, � �������. ������ ������ �������� � ���� ��������� �������������� ��� ������, � ������� � ������� �������� ���� ����������� ������. ����� ����� �������� �� ������� �������������� �� ��������� �� ������� ������.

�������� animation-iteration-count ������ ����������� ��� ����� ������������ �������� animation.

CSS3 � ��������

��� ����������� ��������, ����� IE9- ������������ CSS transitions � CSS animations, ������� ��������� ����������� �������� ���������� CSS, ��� ����������� JavaScript. �������� ����������� � ����� html-���������, � ����� � ��������������� :before:after

��������� ����������

����� ��������������� ��������� � ���� �������, ��� ���������� ������� ��� ����:

  1. ������� ���� �������� c ������� ��������� ����� @keyframes
  2. ���������� � � ��������, ������� ���� �����������, � ������� ������ ��������.

������� @keyframes

������� @keyframes ��������� ��������� �������� � ������� �������� ������ � ��������� ������� � ������������ ������ �������.

�������� ����� �������� ��������� � ������� �������� ���� fromto (������������ ��������� 0% � 100%) ��� � ������� ���������� �������, ������� ����� �������� ������� ������. ����� ����� ������������� �������� ����� � ���������� ������.

���� �� ����� ��������� ( from , 0%) ��� �������� ( to , 100%) ����, ������� ��������� ��� ��� ��������� �������� ����������� ������� ������, ������ ��� ���� �� ���� �� �� ���� ��������� ��������.

���� � ���� �������� ������ ����� ���������� ���������, �� ����������� ������� �������� �����������.

��� ����������� �������� ����� ����� �������� @keyframes ������ ��������� ��� ������ �������� (������ ��� ����� ������ ���� ������� � �������� animation ��������, ������� ����� ����������).

�� ������� ��������, ������� �������� ��������� �������:

  1. ������ �������� ( from ����� ���� �������� 0%) � ��������� �������� �� ��� � ����� 0px;
  2. �������� �������� (50%) � ��������� �������� �� ��� � ����� 130px;
  3. ����� �������� ( to �� ������������ 100%) � ���������� ������� �� ������ ��������, �.�. ��������� �������� �� ��� � ����� 0px;

See the Pen ONgOQY by Aleksei (@AmateR) on CodePen.0

����� � ����� ��� �������� � ������� � �������� ��������� ������� JavaScript, ������� ����� ���������� ��������� ��� ������� ����� � ��������� �� ��������, ������� ��� ��������������� �������� ������ �������� �� ����� ��������.

�������� ����� ����� ������������:

������ �������� ����� ��������� ��������� ��������, �� ����� � ��������� ���� ������ � ������� ����������:

����������� �������� � �������� ���������� ����� ��������� � animation-nameanimation-duration .

�������� ��������

�������� animation-name ������ ��� ��������. ������������� ������������ ��������, ���������� ���� ��������, ��� ���� ����� ������������ ���� ����� ��� ���������, ��������� ����� ����� ��� ������ ������� � ��� ������� ������������� _.

������������ ��������

�������� ������������� ������������ ��������, ��������: animation-duration: 1s;. ��� ����� ��������� � �������� (3s, 65s, .4s) ��� � ������������� (300ms, 1000ms). �� �����������.

��������� �������

�������� animation-timing-function ��������� ������ ����������� �������, ���������� �� �������� ��������������� ��������. ������� ��������, ��� �������� ��������������� �������� ���� ����� ����������, �.�. �� ���������� �������� � ������ �������� ����� ����������. �� ������ ������ ���������� ��������� ��� ���������� ���������� ��� ����� �������: ease , ease-in , ease-out , ease-in-out , linear , step-start , step-end .

������ ����� ������� ����� ��������� ������. ����������� ������� cubic-bezier (P1x, P1y, P2x, P2y); ��������� ������ ��������� � ������ �� �� ������ ������ ������������� �������� � �������� ��������. ��������������� � �������� ����� ������� � ���������� ��� ��� �������� ����� �� ���� �����.

�, �������, �������� ����� ���������� � ����� ���������� �������� � ������� ������� steps (���������� �����, �����������), � �������� ���������� ������� ������� ���������� � ����� � �����������, ������� ����� ��������� �������� start ��� end .

  • ease � ������� �� ���������, �������� ���������� ��������, ����������� ������ � ����������� � �����. ������������� cubic-bezier(0.25,0.1,0.25,1).
  • linear � �������� ���������� ���������� �� ���������� ����� �������, ��� ��������� � ��������; ������������� cubic-bezier(0,0,1,1).
  • ease-in � �������� ���������� ��������, � ����� ������ ���������� � �����; ������������� cubic-bezier(0.42,0,1,1).
  • ease-out � �������� ���������� ������ � ������ ����������� � �����; ������������� cubic-bezier(0,0,0.58,1).
  • ease-in-out � �������� �������� ���������� � �������� �������������; ������������� cubic-bezier(0.42,0,0.58,1).
  • cubic-bezier(x1, y1, x2, y2) � ��.����.
  • inherit � ��������� ��� �������� �� ������������� ��������.

See the Pen VaWyjN by Aleksei (@AmateR) on CodePen.0

�������� � ���������

�������� animation-delay ���������� �������� �� ������ ��������������� ��������, ������� � �������� ��� �������������. ������������� �������� �������� �������� � ������������� ������� ������ � �����, �.�. �� �������, ���������� � ��������. ��� ��������� ��������� �������� � ���������� ��������� �� ������� ����, ������� ���� ����� ��������. ���� �� ������, ����� �������� �������� � ��������, ������� ������������� ��������, ������ �������� �������, ������������� � animation-duration . �� �����������.

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