Animations Flashcards
What are CSS animations?
CSS animations are a way to animate HTML elements using CSS. This can include changes in size, position, color, opacity, and other properties over a certain duration, either once or in a loop.
CSS animations are created by specifying keyframes for the animation sequence and then binding the keyframes to a specified CSS element. The keyframes hold what styles the element will have at certain times, and the animation is smooth in between those keyframes.
Example:
@keyframes example {
0% {background-color: red;}
50% {background-color: yellow;}
100% {background-color: blue;}
}
div {
width: 100px;
height: 100px;
animation: example 5s infinite; /* The animation will last for 5 seconds, and it will repeat forever */
}
In this example, the @keyframes rule defines an animation named example, that changes the background-color of an element from red to yellow at the 50% point, then to blue at the end. The animation property in the div rule attaches the example animation to the div elements, sets the animation to last for 5 seconds and repeats it indefinitely.
What is the difference between CSS animations and CSS transitions?
While both are used to animate CSS properties, transitions are generally simpler and useful when you want to smoothly animate a property from one value to another on events like hover, while animations are more powerful and flexible, providing control over the animation sequence and intermediate steps.
What does animation-name CSS property do?
The animation-name CSS property specifies the names of one or more @keyframes at-rules that describe the animation to apply to an element. Multiple @keyframe at-rules are specified as a comma-separated list of names. If the specified name does not match any @keyframe at-rule, no properties are animated.
“animation-name - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 25, 2023.
What is the syntax of the animation-name CSS property?
Syntax
/* Single animation */ animation-name: none; animation-name: test_05; animation-name: -specific; animation-name: sliding-vertically; /* Multiple animations */ animation-name: test1, animation4; animation-name: none, -moz-specific, sliding;
Values
-
none- A special keyword denoting no keyframes. It can be used to deactivate an animation without changing the ordering of the other identifiers, or to deactivate animations coming from the cascade. -
<custom-ident>- A name identifying the animation. This identifier is composed of a combination of case-sensitive letters a to z, numbers 0 to 9, underscores ( _ ), and/or dashes (-). The first non-dash character must be a letter. Also, two dashes are forbidden at the beginning of the identifier. Furthermore, the identifier can’t be none, unset, initial, or inherit.
“animation-name - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 25, 2023.
What does animation-duration CSS property do?
The animation-duration CSS property sets the length of time that an animation takes to complete one cycle.
“animation-duration - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 25, 2023.
What is the syntax of the animation-duration CSS property?
Syntax
/* Single animation */ animation-duration: 6s; animation-duration: 120ms; /* Multiple animations */ animation-duration: 1.64s, 15.22s; animation-duration: 10s, 35s, 230ms;
Values
-
<time>- The time that an animation takes to complete one cycle. This may be specified in either seconds (s) or milliseconds (ms). The value must be positive or zero and the unit is required.
If no value is provided, the default value of 0s is used
“animation-duration - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 25, 2023.
What does the animation-timing-function CSS property do?
The animation-timing-function CSS property sets how an animation progresses through the duration of each cycle.
“animation-timing-function - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 25, 2023.
What is the syntax of the animation-timing-function CSS property?
Syntax
/* Keyword values */ animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: ease-in-out; animation-timing-function: linear; animation-timing-function: step-start; animation-timing-function: step-end; /* Function values */ animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1); animation-timing-function: steps(4, end); /* Steps Function keywords */ animation-timing-function: steps(4, jump-start); animation-timing-function: steps(10, jump-end); animation-timing-function: steps(20, jump-none); animation-timing-function: steps(5, jump-both); animation-timing-function: steps(6, start); animation-timing-function: steps(8, end);
Values
The animation-timing-function property can take the following values: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int, start|end), cubic-bezier(n,n,n,n), and specific steps using the steps() function.
-
ease- Increases in velocity towards the middle of the animation, slowing back down at the end. -
linear- Animates at an even speed. -
ease-in- Starts off slowly, with the speed of the transition of the animating property increasing until complete. -
ease-out- Starts quickly, slowing down the animation continues. -
ease-in-out- Starts slowly, speeding up, and then slowing down again. -
cubic-bezier(p1, p2, p3, p4)- An author defined cubic-bezier curve, where the p1 and p3 values must be in the range of 0 to 1. -
steps(n, <jumpterm>)- Displays an animation iteration along n stops along the transition, displaying each stop for equal lengths of time.
“animation-timing-function - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 25, 2023.
What is the steps() function in the animation-timing-function CSS property?
steps(n, <jump-term>) - Displays an animation iteration along n stops along the transition, displaying each stop for equal lengths of time. For example, if n is 5, there are 5 steps. Whether the animation holds temporarily at 0%, 20%, 40%, 60% and 80%, on the 20%, 40%, 60%, 80% and 100%, or makes 5 stops between the 0% and 100% along the animation, or makes 5 stops including the 0% and 100% marks (on the 0%, 25%, 50%, 75%, and 100%) depends on which of the following jump terms is used:
-
jump-start|start- Denotes a left-continuous function, so that the first jump happens when the animation begins; -
jump-end|end- Denotes a right-continuous function, so that the last jump happens when the animation ends; -
jump-none- There is no jump on either end. Instead, holding at both the0%mark and the100%mark, each for 1/n of the duration. -
jump-both- Includes pauses at both the0%and100%marks, effectively adding a step during the animation iteration. -
step-start- Equal tosteps(1, jump-start) -
step-end- Equal tosteps(1, jump-end)
“animation-timing-function - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 26, 2023.
What does the animation-delay CSS property do?
The animation-delay CSS property specifies the amount of time to wait from applying the animation to an element before beginning to perform the animation.
“animation-delay - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 26, 2023.
What is the syntax of the animation-delay CSS property?
Syntax
/* Single animation */ animation-delay: 3s; animation-delay: 0s; animation-delay: -1500ms; /* Multiple animations */ animation-delay: 2.1s, 480ms;
Values
-
<time>- The time offset, from the moment at which the animation is applied to the element, at which the animation should begin. This may be specified in either seconds (s) or milliseconds (ms). The unit is required.
A positive value indicates that the animation should begin after the specified amount of time has elapsed.
A negative value causes the animation to begin immediately, but partway through its cycle. For example, if you specify -1s as the animation delay time, the animation will begin immediately but will start 1 second into the animation sequence.
“animation-delay - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 26, 2023.
What does the animation-iteration-count CSS property do?
The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping.
“animation-iteration-count - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 26, 2023.
What is the syntax of the animation-iteration-count CSS property?
Syntax
/* Keyword value */ animation-iteration-count: infinite; /* <number> values */ animation-iteration-count: 3; animation-iteration-count: 2.4; /* Multiple values */ animation-iteration-count: 2, 0, infinite;
Values
The animation-iteration-count property is specified as one or more comma-separated values.
-
infinite- The animation will repeat forever. -
<number>- The number of times the animation will repeat; this is1by default. You may specify non-integer values to play part of an animation cycle: for example,0.5will play half of the animation cycle. Negative values are invalid.
“animation-iteration-count - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 26, 2023.
What does the animation-direction CSS property do?
The animation-direction CSS property sets whether an animation should play forward, backward, or alternate back and forth between playing the sequence forward and backward.
“animation-direction - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 26, 2023.
What is the syntax of the animation-direction CSS property?
Syntax
/* Single animation */ animation-direction: normal; animation-direction: reverse; animation-direction: alternate; animation-direction: alternate-reverse; /* Multiple animations */ animation-direction: normal, reverse; animation-direction: alternate, reverse, normal;
Values
-
normal- Default value - The animation plays forwards each cycle. In other words, each time the animation cycles, the animation will reset to the beginning state and start over again. -
reverse- The animation plays backwards each cycle. In other words, each time the animation cycles, the animation will reset to the end state and start over again. Animation steps are performed backwards, and timing functions are also reversed. For example, anease-intiming function becomesease-out. -
alternate- The animation reverses direction each cycle, with the first iteration being played forwards. The count to determine if a cycle is even or odd starts at one. -
alternate-reverse- The animation reverses direction each cycle, with the first iteration being played backwards. The count to determine if a cycle is even or odd starts at one.
“animation-direction - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 26, 2023.
