CSS Animations Made Easy: Test Your Basics! Quiz

1. Basic Syntax

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

   1. A. animation-name
   2. B. transition-duration
   3. C. animation-effect
   4. D. animate-prop
   5. E. keyframes-name

2. Keyframes Usage

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

   1. A. @keyframes
   2. B. @motion
   3. C. @anim-key
   4. D. @frameset
   5. E. @steps

3. Specifying Duration

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

   1. A. animation-duration
   2. B. animation-loop
   3. C. duration-time
   4. D. cycle-time
   5. E. time-delay

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?

   1. A. ease
   2. B. linear
   3. C. reverse
   4. D. ease-in-out
   5. E. delay

5. Delay Property

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

   1. A. animation-delay: 2s;
   2. B. animation-wait: 2s;
   3. C. delay-time: 2s;
   4. D. wait-animation: 2s;
   5. E. animation-stop: 2s;

6. Iteration Count

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

   1. A. infinite
   2. B. repeat
   3. C. endless
   4. D. looped
   5. E. forever

7. Shorthand Property

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

   1. A. animation: slide 2s infinite linear;
   2. B. animate: slide 2s infinite linear;
   3. C. animation-all: slide, 2s, infinite, linear;
   4. D. animation: slide;
   5. E. anim: slide 2s infinite;

8. Direction Property

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

   1. A. alternate
   2. B. reverse
   3. C. infinite
   4. D. backward
   5. E. forwards

9. Pausing Animations

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

   1. A. animation-play-state: paused;
   2. B. animation-pause: yes;
   3. C. paused: true;
   4. D. stop-animation: on;
   5. E. play-animation: none;

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?

    1. A. animation-fill-mode: forwards;
    2. B. fill-animation: keep;
    3. C. after-style: on;
    4. D. animation-end: stay;
    5. E. animation-delay: final;

11. Multiple Animations

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

    1. A. List the animations separated by commas in the 'animation' property
    2. B. Use 'multi-animation' property
    3. C. Apply 'animation-double' property
    4. D. Add animations in separate selectors only
    5. E. Use the 'animations' property

12. Percentage in Keyframes

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

    1. A. 0% and 100%
    2. B. 5% and 95%
    3. C. first% and final%
    4. D. begin% and end%
    5. E. start% and stop%

13. Transform with Animations

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

    1. A. transform
    2. B. position
    3. C. float
    4. D. margin
    5. E. transition

14. Animation State Change

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

    1. A. The animation continues to play
    2. B. The animation pauses
    3. C. The animation reverses direction
    4. D. The animation stops permanently
    5. E. The animation resets

15. Animation vs Transition

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

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