CSS Animations and Transitions Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

Which property specifies whether the animation is paused or running in CSS animations?

Select your answer

Question 2/15

When defining keyframes, how do you signify the beginning and endpoint of an animation?

Select your answer

Question 3/15

How do you make an animation alternate directions on each cycle in CSS?

Select your answer

Question 4/15

What is the purpose of the animation-iteration-count property in CSS?

Select your answer

Question 5/15

What shorthand syntax could represent the following animation properties? 
animation-name: example; animation-duration: 3s; animation-timing-function: linear;

Select your answer

Question 6/15

For which property would the transition not affect the element despite being declared?

Select your answer

Question 7/15

Which property-value captures play state of an animation?

Select your answer

Question 8/15

What would animation: myanm 3s steps(4, end); do?

Select your answer

Question 9/15

In the context of CSS animations, what concept allows an animation to retain its style values from the last keyframe?

Select your answer

Question 10/15

Which of the following is NOT a valid value for the animation-fill-mode property?

Select your answer

Question 11/15

Which of these options best describes what animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55); does uniquely?

Select your answer

Question 12/15

Which property can be animated for a smooth appearance effect with giving a no-remain finish?

Select your answer

Question 13/15

How would you freeze an element’s style from an animation at a specific frame after it is finished?

Select your answer

Question 14/15

If you have a CSS property that should remain unchanged during an animation, which timing function should you use?

Select your answer

Question 15/15

Which CSS property can be used to create a delay before an animation starts?

Select your answer

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which property specifies whether the animation is paused or running in CSS animations?

Available answers

The animation-play-state property allows you to determine if the animation is running or paused.
Question 2/15
😊 Your answer was correct 🙁 Your answer was incorrect
When defining keyframes, how do you signify the beginning and endpoint of an animation?

Available answers

Animations typically start and end at 0% and 100% respectively, marking the entire animation duration.
Question 3/15
😊 Your answer was correct 🙁 Your answer was incorrect
How do you make an animation alternate directions on each cycle in CSS?

Available answers

The animation-direction: alternate; causes the animation to change direction with each cycle.
Question 4/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the purpose of the <code>animation-iteration-count</code> property in CSS?

Available answers

The animation-iteration-count property defines the number of times an animation should run. It can be an integer or the keyword infinite.
Question 5/15
😊 Your answer was correct 🙁 Your answer was incorrect
What shorthand syntax could represent the following animation properties? <pre><code>animation-name: example; animation-duration: 3s; animation-timing-function: linear;</code></pre>

Available answers

The shorthand for these animation properties is animation: example 3s linear;.
Question 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
For which property would the transition not affect the element despite being declared?

Available answers

Since display toggles entire rendering modes instantly, it cannot be transitioned smoothly.
Question 7/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which property-value captures play state of an animation?

Available answers

The animation play state can be toggled with animation-play-state: paused; or running;.
Question 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
What would <code>animation: myanm 3s steps(4, end);</code> do?

Available answers

The steps(4, end) timing function creates 4 abrupt steps over the duration of 3 seconds.
Question 9/15
😊 Your answer was correct 🙁 Your answer was incorrect
In the context of CSS animations, what concept allows an animation to retain its style values from the last keyframe?

Available answers

The animation-fill-mode: forwards; allows an animation to retain the properties from the final keyframe after it ends.
Question 10/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which of the following is NOT a valid value for the <code>animation-fill-mode</code> property?

Available answers

inverted is not a valid value for the animation-fill-mode property. Valid values include none, forwards, backwards, and both.
Question 11/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which of these options best describes what <code>animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);</code> does uniquely?

Available answers

The specified cubic-bezier creates a distinctive bouncing effect due to its control point placements.
Question 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which property can be animated for a smooth appearance effect with giving a no-remain finish?

Available answers

Animating opacity smoothly achieves see-through effects without affecting layout or leaving behind a footprint post-animation.
Question 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
How would you freeze an element’s style from an animation at a specific frame after it is finished?

Available answers

By setting animation-fill-mode: forwards; the final state (and any adjustments to it) can be made effective post-animation.
Question 14/15
😊 Your answer was correct 🙁 Your answer was incorrect
If you have a CSS property that should remain unchanged during an animation, which timing function should you use?

Available answers

step-start or step-end are used to lock attribute values stepwise, effectively keeping them unchanged during steps.
Question 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which CSS property can be used to create a delay before an animation starts?

Available answers

The animation-delay property is used to delay the start of an animation.