CSS Animations and Transitions Quiz

Create an account and save your quiz results

Login and save your results

OR

Question 1/15

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

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 trigger a CSS transition?

Select your answer

Question 4/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 5/15

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

Select your answer

Question 6/15

If you want an animation to run in reverse direction, which property and value should you use?

Select your answer

Question 7/15

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

Select your answer

Question 8/15

What is the effect of the animation-timing-function: steps(5, jump-end); when applied over a duration?

Select your answer

Question 9/15

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

Select your answer

Question 10/15

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

Select your answer

Question 11/15

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

Select your answer

Question 12/15

Which CSS property is used to specify how many seconds or milliseconds an animation takes to complete one cycle?

Select your answer

Question 13/15

What does the transition-property CSS property specify?

Select your answer

Question 14/15

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

Select your answer

Question 15/15

What CSS feature would you use to execute multiple animations sequentially on the same element?

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
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 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 trigger a CSS transition?

Available answers

CSS transitions are triggered when a property changes that has been specified in the transition property, for example, changing width or color.
Question 4/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 5/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 6/15
😊 Your answer was correct 🙁 Your answer was incorrect
If you want an animation to run in reverse direction, which property and value should you use?

Available answers

To make an animation run in reverse direction, use animation-direction: reverse;.
Question 7/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 8/15
😊 Your answer was correct 🙁 Your answer was incorrect
What is the effect of the <code>animation-timing-function: steps(5, jump-end);</code> when applied over a duration?

Available answers

With steps(5, jump-end), the animation comes in 5 discrete segments, jumping directly to each step.
Question 9/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 10/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.
Question 11/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 12/15
😊 Your answer was correct 🙁 Your answer was incorrect
Which CSS property is used to specify how many seconds or milliseconds an animation takes to complete one cycle?

Available answers

The animation-duration property specifies how many seconds or milliseconds an animation takes to complete one cycle.
Question 13/15
😊 Your answer was correct 🙁 Your answer was incorrect
What does the <code>transition-property</code> CSS property specify?

Available answers

The transition-property specifies the CSS properties to which a transition effect should be applied.
Question 14/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 15/15
😊 Your answer was correct 🙁 Your answer was incorrect
What CSS feature would you use to execute multiple animations sequentially on the same element?

Available answers

Sequential animations can be organized by utilizing strategic animation-delay settings.