Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

CSS > Animations > Flashcards

Animations Flashcards

1
Q

What are CSS animations?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

What is the difference between CSS animations and CSS transitions?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

What does animation-name CSS property do?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

What is the syntax of the animation-name CSS property?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

What does animation-duration CSS property do?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What is the syntax of the animation-duration CSS property?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

What does the animation-timing-function CSS property do?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

What is the syntax of the animation-timing-function CSS property?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

What is the steps() function in the animation-timing-function CSS property?

A

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 the 0% mark and the 100% mark, each for 1/n of the duration.
  • jump-both - Includes pauses at both the 0% and 100% marks, effectively adding a step during the animation iteration.
  • step-start - Equal to steps(1, jump-start)
  • step-end - Equal to steps(1, jump-end)

“animation-timing-function - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 26, 2023.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

What does the animation-delay CSS property do?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

What is the syntax of the animation-delay CSS property?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What does the animation-iteration-count CSS property do?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

What is the syntax of the animation-iteration-count CSS property?

A

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 is 1 by default. You may specify non-integer values to play part of an animation cycle: for example, 0.5 will 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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

What does the animation-direction CSS property do?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What is the syntax of the animation-direction CSS property?

A

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, an ease-in timing function becomes ease-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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

What does animation-fill-mode CSS property do?

A

The animation-fill-mode CSS property sets how a CSS animation applies styles to its target before and after its execution.

“animation-fill-mode - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 26, 2023.

17
Q

What is the syntax of the animation-fill-mode CSS property?

A

Syntax

/* Single animation */
animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;

/* Multiple animations */
animation-fill-mode: none, backwards;
animation-fill-mode: both, forwards, none;

Values

  • none - Default - The animation will not apply any styles to the target when it’s not executing. The element will instead be displayed using any other CSS rules applied to it.
  • forwards - The target will retain the computed values set by the last keyframe encountered during execution.
  • backwards - The animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period.
  • both - The animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions.

“animation-fill-mode - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 26, 2023.

18
Q

What does the animation-play-state CSS property do?

A

The animation-play-state CSS property sets whether an animation is running or paused.

“animation-play-state - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 29, 2023.

19
Q

What is the syntax of the animation-play-state CSS property?

A

Syntax

/* Single animation */
animation-play-state: running;
animation-play-state: paused;

/* Multiple animations */
animation-play-state: paused, running, running;

Values

  • running - The animation is currently playing.
  • paused - The animation is currently paused.

“animation-play-state - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 29, 2023.

20
Q

What does the animation-composition CSS property do?

A

The animation-composition CSS property specifies the composite operation to use when multiple animations affect the same property simultaneously.

“animation-composition - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 29, 2023.

21
Q

What is the syntax of the animation-composition CSS property?

A

Syntax

/* Single animation */
animation-composition: replace;
animation-composition: add;
animation-composition: accumulate;

/* Multiple animations */
animation-composition: replace, add;
animation-composition: add, accumulate;
animation-composition: replace, add, accumulate;

Values

  • replace - defalut value - The effect value overrides the underlying value of the property.
  • add - The effect value builds on the underlying value of the property. This operation produces an additive effect. For animation types where the addition operation is not commutative, the order of the operands is the underlying value followed by the effect value.
  • accumulate - The effect and underlying values are combined. For animation types where the addition operation is not commutative, the order of the operands is the underlying value followed by the effect value.

Example:

.icon:hover {
  filter: blur(5px);
  animation: 3s infinite pulse;
  animation-composition: add;
}

@keyframes pulse {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(20px);
  }
}

Consider different values for the animation-composition property in the above example. The final effect value in each of those cases will be calculated as explained below:

  • With replace, blur(10px) will replace blur(5px) in the 0% keyframe. This is the default behavior of the property.
  • With add, the composite effect value in the 0% keyframe will be blur(5px) blur(10px).
  • With accumulate, the composite effect value in 0% keyframe will be blur(15px).

“animation-composition - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 29, 2023.

22
Q

What does the @keyframes CSS at-rule do?

A

The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence.

“@keyframes - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 30, 2023.

23
Q

What is the syntax of the @keyframes CSS at-rule?

A

Syntax

@keyframes custom-ident {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(100%);
  }
}

@keyframes custom-ident-2 {
  0%   {background-color: red;}
  50%  {background-color: yellow;}
  100% {background-color: blue;}
}

Values

  • <custom-ident> - A name identifying the keyframe list. This must match the identifier production in CSS syntax.
  • from - A starting offset of 0%.
  • to - An ending offset of 100%.
  • <percentage> - A percentage of the time through the animation sequence at which the specified keyframe should occur.

“@keyframes - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 30, 2023.

24
Q

What happens to properties that can’t be animated in keyframe rules?

A

Properties that can’t be animated in keyframe rules are ignored, but supported properties will still be animated.

“@keyframes - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 30, 2023.

25
Q

How are @keyframe at-rule duplicates handled?

A

If multiple keyframe sets exist for a given name, the last one encountered by the parser is used. @keyframes rules don’t cascade, so animations never derive keyframes from more than one rule set.

If a given animation time offset is duplicated, all keyframes in the @keyframes rule for that percentage are used for that frame. There is cascading within a @keyframes rule if multiple keyframes specify the same percentage values.

“@keyframes - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 30, 2023.

26
Q

What happens when properties are left out of some keyframes?

A

Properties that aren’t specified in every keyframe are interpolated if possible — properties that can’t be interpolated are dropped from the animation. For example:

@keyframes identifier {
  0% {
    top: 0;
    left: 0;
  }
  30% {
    top: 50px;
  }
  68%,
  72% {
    left: 50px;
  }
  100% {
    top: 100px;
    left: 100%;
  }
}

Here, the top property animates using the 0%, 30%, and 100% keyframes, and left animates using the 0%, 68%, 72% and 100% keyframes.

“@keyframes - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 30, 2023.

27
Q

What happens to declarations with !important in a keyframe?

A

Declarations in a keyframe qualified with !important are ignored.

@keyframes important1 {
  from {
    margin-top: 50px;
  }
  50% {
    margin-top: 150px !important;
  } /* ignored */
  to {
    margin-top: 100px;
  }
}

@keyframes important2 {
  from {
    margin-top: 50px;
    margin-bottom: 100px;
  }
  to {
    margin-top: 150px !important; /* ignored */
    margin-bottom: 50px;
  }
}

“@keyframes - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 30, 2023.

28
Q

What does the animation CSS shorthand property do?

A

The animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.

“animation - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 31, 2023.

29
Q

List the properties the animation shorthand property encapsulates

A

The animation shorthand property encapsulates the following properties:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

“animation - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved May 31, 2023.

30
Q

What is the syntax of the animation CSS shorthand property?

A

Syntax

/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slidein;

/* two animations */
animation: 3s linear slidein, 3s ease-out 5s slideout;
Copy to Clipboard

Values
The animation property is specified as one or more single animations, separated by commas.

Each individual animation is specified as:

zero, one, or two occurrences of the <time> value
zero or one occurrences of the following values:
<single-easing-function>
<single-animation-iteration-count>
<single-animation-direction>
<single-animation-fill-mode>
<single-animation-play-state>
an optional name for the animation, which may be none, a <custom-ident>, or a <string> Values

CSS (44 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2025 Bold Learning Solutions. Terms and Conditions