CSS Animations and Transitions

Understand keyframes and timing functions.

1. Which CSS property specifies the CSS properties that should be transitioned?

transition-start transition-property transition-apply transition-active

2. CSS transitions can automatically animate property changes on page load without user interaction.

True False

3. What CSS at-rule is used to define the stages (keyframes) of a CSS animation? (full name, starts with '@')

4. Which of the following are valid CSS transition timing functions? (Select all that apply)

ease bounce linear cubic-bezier(0.4, 0, 0.2, 1) fast

5. What is the default duration of a CSS transition if not explicitly set?

0s 0.3s 1s 2s

6. The 'animation-iteration-count' property can be set to 'infinite' to loop an animation indefinitely.

True False

7. Which of these CSS properties CANNOT be animated or transitioned? (Select all that apply)

color display background-color height visibility

8. What is the shorthand CSS property that combines transition-property, duration, timing-function, and delay? (one word)

9. Which CSS property controls the direction of an animation (e.g., forward, reverse, alternate)?

animation-flow animation-direction animation-path animation-order

10. CSS transitions can animate from 'auto' to a specific value (e.g., width: auto to width: 200px).

True False

11. Which of the following are sub-properties of the 'animation' shorthand? (Select all that apply)

animation-name animation-speed animation-duration animation-delay animation-loop

12. What is the minimum number of keyframe selectors required in a @keyframes rule to define an animation? (numeric answer)

13. What is the purpose of the 'transition-delay' property?

To pause the transition halfway To specify when the transition should start To reverse the transition direction To set the total transition duration

14. Using 'transition: all' is recommended for optimal performance in CSS transitions.

True False

15. Which events can trigger a CSS transition? (Select all that apply)

:hover pseudo-class Window resize :active pseudo-class JavaScript adding a CSS class Element initial load

16. What CSS property defines how an animation applies styles before it starts and after it ends? (starts with 'animation-')

17. Which CSS function allows defining custom timing functions with four control points?

ease-in-out() cubic-bezier() step-function() timing-curve()

18. CSS animations require JavaScript to start playing.

True False

19. Which of these are valid values for 'animation-timing-function'? (Select all that apply)

ease-in step-start linear-in cubic-bezier(0.1, 0.8, 0.2, 1) fast-out-slow-in

20. What is the default value of 'animation-play-state'?

paused running idle stopped

Answered 0 of 0 — 0 correct

Company