CSS - Animations

*animation:* what is? Order of properties?

A shorthand property for setting all the animation properties animation: 1) animation-name 2) animation-duration 3) animation-timing-function 4) animation-delay 5) animation-iteration-count 6) animation-direction 7) animation-fill-mode 8) animation-play-state;

*animation-direction:* what does? Keywords (4)?

The animation-direction property defines whether an animation should be played forwards, backwards or in alternate cycles. animation-direction: normal | reverse | alternate | alternate-reverse; https://www.w3schools.com/cssref/css3_pr_animation-direction.asp

*animation-delay:* what does?

animation-duration: time - Optional. Defines the number of seconds (s) or milliseconds (ms) to wait before the animation will start. Ex: animation-delay: 3s

*animation-duration:* what does?

animation-duration: time - Specifies the length of time an animation should take to complete one cycle. Ex: animation-duration: 1.2s

*animation-iteration-count:* what does? 2 variables?

animation-iteration-count: 'number' || infinite - The animation-iteration-count property specifies the number of times an animation should be played. Ex: animation-iteration-count: 2; - animation repeated 2 times

*animation-name:* what does?

animation-name: keyframename - specifies a name for the @keyframes animation.

*@keyframes* what does? Syntax? Note?

The @keyframes rule specifies the animation *Note:* The !important rule is ignored in a keyframe (See the link). https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_keyframes_important Syntax: @keyframes animationname {keyframes-selector {css-styles;}} 1) animationname - Required. Defines the name of the animation. 2) keyframes-selector - Legal values: 0-100% from (same as 0%) to (same as 100%) (it is possible to combine keywords and percentages) https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

*animation-fill-mode:* what does? Note? Keywords (4)?

The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both). *Note:* CSS animations do not affect the element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior. animation-fill-mode: none | forwards | backwards | both; 1) none - Default value. Animation will not apply any styles to the element before or after it is executing 2) forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count) 3) backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period 4) both - The animation will follow the rules for both forwards and backwards https://www.w3schools.com/cssref/css3_pr_animation-fill-mode.asp

*animation-play-state:* what does? Keywords (2)? *Note?*

The animation-play-state property specifies whether the animation is running or paused. *Note:* Use this property in a JavaScript to pause an animation in the middle of a cycle. animation-play-state: paused | running; Ex: animation-play-state: paused; - Анімація переходить в ПАУЗУ на 1 @keyframes https://www.w3schools.com/cssref/css3_pr_animation-play-state.asp

*animation-timing-function:* what does?

The animation-timing-function specifies the speed curve of an animation. *Literally the same as transition-timing-function:*

animation-direction: alternate-reverse;

Анімація відтворюється в обидві реверсивно (КІНЕЦЬ >>> ПОЧАТОК >>> КІНЕЦЬ (повернення))

animation-direction: alternate;

Анімація відтворюється в обидві сторони (ПОЧАТОК >>> КІНЕЦЬ >>> ПОЧАТОК (повернення))

animation-direction: reverse

Анімація відтворюється реверсивно (КІНЕЦЬ >>> ПОЧАТОК) Після закінчення все починається з заново.

animation-direction: normal;

Анімація відтворюється стандартно (ПОЧАТОК >>> КІНЕЦЬ) Після закінчення все починається з заново. *За замовчуванням

animation-iteration-count: infinite;

Значення того, скільки раз анімація повторятиметься Приклад:БЕЗКІНЕЧНІСТЬ