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;
Значення того, скільки раз анімація повторятиметься Приклад:БЕЗКІНЕЧНІСТЬ