Animation exercises

Question 1

Given the following CSS rule, identify the name, duration, and iteration count of the animation

div {
  animation: spin 3s infinite;
}

Answer 1

• animation-name: spin
• animation-duration: 3s
• animation-iteration-count: infinite

Question 2

Write a CSS rule to apply an animation named spin, which lasts for 2s, runs infinite times, and has a linear timing function.

Answer 2

div { animation: spin 2s linear infinite; }

Question 3

What will be the behavior of the following CSS animation?

div {
  animation: bounce 2s ease-in-out 1s infinite alternate both paused;
}

Answer 3

This animation:

• is named bounce
• lasts 2s
• has an ease-in-out timing function, meaning it starts slowly, accelerates in the middle, and then slows down at the end
• waits 1s before starting the animation
• runs an infinite number of times
• alternates directions between iterations (alternate)
• applies styles from the animation to the element both before (backwards) and after (forwards) the animation’s execution
• is initially paused, meaning it will not run until its play-state is changed to running

Question 4

Write a CSS rule for an animation named slide, which lasts for 5s, has a delay of 2s, runs 3 times, and is initially paused

Answer 4

div { animation: slide 5s 2s 3 paused; }

Question 5

Given the following CSS rule, how many times will the animation run and in what direction?

div {
  animation: growShrink 4s infinite reverse;
}

Answer 5

• animation-iteration-count: infinite, so the animation will run indefinitely
• animation-direction: reverse, so the animation will play in reverse

Question 6

What will be the animation-fill-mode and animation-play-state for the following CSS rule?

div {
  animation: popIn 3s both running;
}

Answer 6

• animation-fill-mode: both, meaning the styles are applied to the element for both the state before and after the animation’s execution
• animation-play-state: running, meaning the animation will run as soon as it is applied

Question 7

Given the following CSS rule, what will be the name and duration of the animation?

div {
  animation: popOut 5s;
}

Answer 7

• animation-name: popOut
• animation-duration: 5s

Question 8

Write a CSS rule to apply an animation named rotate, which lasts for 1s, runs 5 times, and has an ease-out timing function.

Answer 8

div { animation: rotate 1s ease-out 5; }

Question 9

What is the behavior of the following CSS animation?

div {
  animation: bounce 2s ease-in 1s 3 alternate backwards;
}

Answer 9

• is named bounce
• lasts 2s
• has an ease-in timing function, meaning it starts slowly and then accelerates
• waits 1s before starting the animation
• runs 3 times
• alternates directions between iterations (alternate)
• applies styles from the animation to the element before the animation’s execution (backwards)

Question 10

Write a CSS rule for an animation named fade, which lasts for 3s, has a delay of 1s, runs 2 times, and uses a ease-in-out timing function.

Answer 10

div { animation: fade 3s ease-in-out 1s 2; }

Question 11

What will be the animation-timing-function and animation-delay for the following CSS rule?

div {
  animation: grow 3s ease-in 1s;
}

Answer 11

• animation-timing-function: ease-in, meaning the animation starts slowly and then accelerates
• animation-delay: 1s, meaning the animation will start after a delay of 1 second

Question 12

Given the following CSS rule, what is the direction of the animation and its play state?

div {
  animation: shrink 4s alternate paused;
}

Answer 12

• animation-direction: alternate, meaning the animation will alternate directions with each iteration
• animation-play-state: paused, meaning the animation will not start running until its play state is changed

Question 13

Write a CSS rule to apply an animation named jump, which lasts for 1.5s, has a delay of 0.5s, runs infinite times, and is initially running.

Answer 13

div {  animation: jump 1.5s 0.5s infinite running; }

Question 14

What will be the animation-iteration-count and animation-fill-mode for the following CSS rule?

div {
  animation: slideIn 3s 1 backwards;
}

Answer 14

• animation-iteration-count: 1, meaning the animation will play once
• animation-fill-mode: backwards, meaning the styles defined by the animation’s first keyframe will be applied as soon as the animation is applied to the element

Question 15

Given the following CSS rule, what will be the name, duration, and timing function of the animation?

div {
  animation: flip 2s cubic-bezier(0.1, 0.7, 1.0, 0.1) 1s;
}

Answer 15

• animation-name: flip
• animation-duration: 2s
• animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1), this represents a cubic bezier curve for customizing the timing function