20 CSS Animations Quiz Questions and Answers

Question 1:
What is the CSS at-rule used to define keyframe animations?
A. @animate
B. @keyframes
C. @animation
D. @transform
Answer: B
Explanation: The @keyframes at-rule specifies the animation code, defining the styles at various points during the animation sequence.

Question 2:
Which property is used to apply an animation to an element?
A. transition
B. animate
C. animation
D. keyframes
Answer: C
Explanation: The animation property is a shorthand for setting animation properties like name, duration, and timing function on an element.

Question 3:
What does the animation-duration property control?
A. The number of times the animation plays
B. The speed of the animation
C. The length of time the animation takes to complete one cycle
D. The delay before the animation starts
Answer: C
Explanation: animation-duration sets the length of time for one full animation cycle, such as 2s for two seconds.

Question 4:
Which timing function creates a linear animation?
A. ease-in
B. linear
C. ease-out
D. ease-in-out
Answer: B
Explanation: The linear value for animation-timing-function makes the animation progress at a constant speed throughout its duration.

Question 5:
How can you make an animation repeat indefinitely?
A. animation-iteration-count: infinite
B. animation-repeat: forever
C. animation-iteration: loop
D. animation-count: endless
Answer: A
Explanation: Setting animation-iteration-count to infinite allows the animation to repeat without stopping.

Question 6:
What is the default value for animation-iteration-count?
A. infinite
B. 1
C. 0
D. loop
Answer: B
Explanation: By default, animation-iteration-count is 1, meaning the animation plays once unless specified otherwise.

Question 7:
Which property can be used to delay the start of an animation?
A. animation-delay
B. animation-start
C. animation-wait
D. animation-pause
Answer: A
Explanation: animation-delay specifies the time to wait before the animation begins, such as 1s for a one-second delay.

Question 8:
In CSS animations, what does the animation-direction property control?
A. The speed of the animation
B. Whether the animation plays forwards, backwards, or alternates
C. The number of repetitions
D. The timing function
Answer: B
Explanation: animation-direction can be set to normal, reverse, alternate, or alternate-reverse to control the direction of playback.

Question 9:
How do you specify an animation to play in reverse after the first cycle?
A. animation-direction: reverse
B. animation-direction: alternate
C. animation-direction: backwards
D. animation-direction: loop
Answer: B
Explanation: Setting animation-direction to alternate makes the animation play forwards first, then backwards on subsequent iterations.

Question 10:
What is the difference between CSS transitions and animations?
A. Transitions can only be used for hover effects
B. Animations require @keyframes, while transitions do not
C. Transitions are always infinite, animations are not
D. There is no difference
Answer: B
Explanation: CSS animations use @keyframes to define complex sequences, whereas transitions handle simple state changes without keyframes.

Question 11:
Which CSS property is used to define the animation name?
A. animation-name
B. keyframes-name
C. animation-key
D. animate-id
Answer: A
Explanation: animation-name links an element to a specific @keyframes rule, such as animation-name: slideIn.

Question 12:
What happens if you set animation-fill-mode to forwards?
A. The animation retains the styles from the last keyframe after ending
B. The animation restarts immediately
C. The animation plays in reverse
D. The element returns to its original state
Answer: A
Explanation: animation-fill-mode: forwards applies the styles from the last keyframe to the element even after the animation finishes.

Question 13:
Can CSS animations be applied to pseudo-elements like ::before?
A. No, only to regular elements
B. Yes, as long as the pseudo-element is defined
C. Only in specific browsers
D. Yes, but only for transitions
Answer: B
Explanation: CSS animations can be applied to pseudo-elements like ::before or ::after, allowing for dynamic effects on generated content.

Question 14:
What is the purpose of the animation-play-state property?
A. To control the playback state, like paused or running
B. To set the animation duration
C. To define the keyframes
D. To change the animation direction
Answer: A
Explanation: animation-play-state can be set to paused or running to control whether the animation is active or halted.

Question 15:
How do you create a bouncing effect in CSS animations?
A. Using ease-in timing
B. Defining keyframes with translate transformations
C. Setting animation-iteration-count to 1
D. Using only transitions
Answer: B
Explanation: A bouncing effect is achieved by defining @keyframes that include transform: translateY() to move the element up and down.

Question 16:
Which unit is commonly used with animation-duration?
A. px
B. em
C. s (seconds) or ms (milliseconds)
D. %
Answer: C
Explanation: animation-duration uses time units like s or ms to specify the length of the animation, such as 0.5s.

Question 17:
What does animation-timing-function: ease do?
A. Starts slow and speeds up
B. Starts fast and slows down
C. Progresses at a constant speed
D. Starts slow, speeds up, then slows down
Answer: D
Explanation: ease is the default timing function, providing a smooth start, acceleration in the middle, and deceleration at the end.

Question 18:
Can multiple animations be applied to a single element?
A. No, only one per element
B. Yes, by comma-separating in the animation property
C. Only if they use the same keyframes
D. Yes, but only for transitions
Answer: B
Explanation: You can apply multiple animations to an element by listing them in the animation property, separated by commas.

Question 19:
What is the role of the ‘from’ and ‘to’ keywords in @keyframes?
A. They define the start and end of the animation
B. They set the animation direction
C. They control the timing function
D. They specify the element to animate
Answer: A
Explanation: In @keyframes, ‘from’ represents the initial state (0%), and ‘to’ represents the final state (100%) of the animation.

Question 20:
How can you make an animation only visible on hover?
A. Using :hover pseudo-class with animation properties
B. Setting animation-play-state on hover
C. Both A and B
D. It is not possible
Answer: C
Explanation: You can trigger an animation on hover by applying animation properties within a :hover selector or by changing animation-play-state on hover.