CSS Animations Made Easy: Test Your Basics! — Questions & Answers

This quiz contains 15 questions. Below is a complete reference of all questions, answer choices, and correct answers. You can use this section to review after taking the interactive quiz above.

1. Question 1: Basic Syntax

   Which property is required to specify the name of an animation you want to use on an element?

   • A. animation-name
   • B. transition-duration
   • C. animation-effect
   • D. animate-prop
   • E. keyframes-name
   Show correct answer

   Correct answer: A. animation-name

2. Question 2: Keyframes Usage

   When creating an animation, which at-rule is used to define the animation steps in CSS?

   • A. @keyframes
   • B. @motion
   • C. @anim-key
   • D. @frameset
   • E. @steps
   Show correct answer

   Correct answer: A. @keyframes

3. Question 3: Specifying Duration

   Which property should you use to set how long a CSS animation takes to complete one cycle?

   • A. animation-duration
   • B. animation-loop
   • C. duration-time
   • D. cycle-time
   • E. time-delay
   Show correct answer

   Correct answer: A. animation-duration

4. Question 4: Animation Timing Functions

   If you want your animation to start slowly, speed up, and then slow down again, which timing function would you use?

   • A. ease
   • B. linear
   • C. reverse
   • D. ease-in-out
   • E. delay
   Show correct answer

   Correct answer: D. ease-in-out

5. Question 5: Delay Property

   How can you add a 2-second delay before a CSS animation starts?

   • A. animation-delay: 2s;
   • B. animation-wait: 2s;
   • C. delay-time: 2s;
   • D. wait-animation: 2s;
   • E. animation-stop: 2s;
   Show correct answer

   Correct answer: A. animation-delay: 2s;

6. Question 6: Iteration Count

   Which value makes a CSS animation run an unlimited number of times?

   • A. infinite
   • B. repeat
   • C. endless
   • D. looped
   • E. forever
   Show correct answer

   Correct answer: A. infinite

7. Question 7: Shorthand Property

   Which of these is the correct way to use the shorthand property to set all animation properties in one line?

   • A. animation: slide 2s infinite linear;
   • B. animate: slide 2s infinite linear;
   • C. animation-all: slide, 2s, infinite, linear;
   • D. animation: slide;
   • E. anim: slide 2s infinite;
   Show correct answer

   Correct answer: A. animation: slide 2s infinite linear;

8. Question 8: Direction Property

   To make an animation play forwards and then backwards, which value should you set for the animation-direction property?

   • A. alternate
   • B. reverse
   • C. infinite
   • D. backward
   • E. forwards
   Show correct answer

   Correct answer: A. alternate

9. Question 9: Pausing Animations

   Which property and value will pause a running CSS animation on an element?

   • A. animation-play-state: paused;
   • B. animation-pause: yes;
   • C. paused: true;
   • D. stop-animation: on;
   • E. play-animation: none;
   Show correct answer

   Correct answer: A. animation-play-state: paused;

10. Question 10: Fill Mode

    If you want an element to retain the styles from the last keyframe after an animation ends, which property and value should you use?

    • A. animation-fill-mode: forwards;
    • B. fill-animation: keep;
    • C. after-style: on;
    • D. animation-end: stay;
    • E. animation-delay: final;
    Show correct answer

    Correct answer: A. animation-fill-mode: forwards;

11. Question 11: Multiple Animations

    How can you apply more than one animation to the same element?

    • A. List the animations separated by commas in the 'animation' property
    • B. Use 'multi-animation' property
    • C. Apply 'animation-double' property
    • D. Add animations in separate selectors only
    • E. Use the 'animations' property
    Show correct answer

    Correct answer: A. List the animations separated by commas in the 'animation' property

12. Question 12: Percentage in Keyframes

    Inside a @keyframes rule, which statements represent the start and end of an animation using percentages?

    • A. 0% and 100%
    • B. 5% and 95%
    • C. first% and final%
    • D. begin% and end%
    • E. start% and stop%
    Show correct answer

    Correct answer: A. 0% and 100%

13. Question 13: Transform with Animations

    If you want to rotate an element 360 degrees during an animation, which property should you animate within the keyframes?

    • A. transform
    • B. position
    • C. float
    • D. margin
    • E. transition
    Show correct answer

    Correct answer: A. transform

14. Question 14: Animation State Change

    What happens to a CSS animation when you set animation-play-state to 'running'?

    • A. The animation continues to play
    • B. The animation pauses
    • C. The animation reverses direction
    • D. The animation stops permanently
    • E. The animation resets
    Show correct answer

    Correct answer: A. The animation continues to play

15. Question 15: Animation vs Transition

    Which of the following statements best describes the difference between a CSS animation and a transition?

    • A. Animations can run automatically, transitions require a trigger
    • B. Transitions can use keyframes, animations cannot
    • C. Animations only work on hover, transitions do not
    • D. Both require event listeners in JavaScript
    • E. Animations and transitions are exactly the same
    Show correct answer

    Correct answer: A. Animations can run automatically, transitions require a trigger