Home › Quizzes › CSS Animations and Transitions

CSS Animations and Transitions

This quiz covers fundamental concepts and practical applications of CSS Animations and Transitions. Test your understanding of animation techniques, property values, and transition effects.

14 Questions Published
Play Quiz Practise this topic out loud

Questions

Question 1 Multiple Choice (Single Answer)

What CSS property is used to define the duration of an animation?

  1. animation-duration
  2. transition-duration
  3. animation-timing-function
  4. transition-timing-function
Question 2 Multiple Choice (Single Answer)

Which CSS property controls the number of times an animation should repeat?

  1. animation-iteration-count
  2. transition-iteration-count
  3. animation-timing-function
  4. transition-timing-function
Question 3 Multiple Choice (Single Answer)

What is the default value for the animation-timing-function property?

  1. ease
  2. linear
  3. ease-in
  4. ease-out
Question 4 Multiple Choice (Single Answer)

Which CSS property is used to specify the delay before an animation starts?

  1. animation-delay
  2. transition-delay
  3. animation-timing-function
  4. transition-timing-function
Question 5 Multiple Choice (Single Answer)

What is the difference between CSS animations and transitions?

  1. Animations are for changing multiple properties, while transitions are for changing a single property.
  2. Animations can be repeated, while transitions cannot.
  3. Animations can be paused and resumed, while transitions cannot.
  4. All of the above.
Question 6 Multiple Choice (Single Answer)

Which CSS property is used to define the direction of an animation?

  1. animation-direction
  2. transition-direction
  3. animation-timing-function
  4. transition-timing-function
Question 7 Multiple Choice (Single Answer)

What is the purpose of the @keyframes rule in CSS animations?

  1. To define the starting and ending states of an animation.
  2. To specify the duration and timing of an animation.
  3. To control the number of times an animation repeats.
  4. To set the delay before an animation starts.
Question 8 Multiple Choice (Single Answer)

Which CSS property is used to specify the fill mode of an animation?

  1. animation-fill-mode
  2. transition-fill-mode
  3. animation-timing-function
  4. transition-timing-function
Question 9 Multiple Choice (Single Answer)

What is the purpose of the transition property in CSS?

  1. To define the duration and timing of a transition.
  2. To control the number of times a transition repeats.
  3. To set the delay before a transition starts.
  4. To specify the fill mode of a transition.
Question 10 Multiple Choice (Single Answer)

Which CSS property is used to specify the easing function of a transition?

  1. transition-timing-function
  2. animation-timing-function
  3. animation-direction
  4. animation-fill-mode
Question 11 Multiple Choice (Single Answer)

What is the difference between animation-name and animation properties in CSS?

  1. animation-name specifies the name of the animation, while animation is a shorthand property that includes all animation properties.
  2. animation-name defines the keyframes of the animation, while animation specifies the duration, timing, and other properties of the animation.
  3. animation-name controls the number of times the animation repeats, while animation sets the delay before the animation starts.
  4. animation-name specifies the fill mode of the animation, while animation defines the easing function of the animation.
Question 12 Multiple Choice (Single Answer)

Which CSS property is used to specify the starting point of a transition?

  1. transition-origin
  2. animation-origin
  3. animation-direction
  4. animation-fill-mode
Question 13 Multiple Choice (Single Answer)

What is the purpose of the steps() function in CSS transitions?

  1. To create a stepped transition effect.
  2. To define the duration and timing of a transition.
  3. To control the number of times a transition repeats.
  4. To set the delay before a transition starts.
Question 14 Multiple Choice (Single Answer)

Which CSS property is used to specify the playback rate of an animation?

  1. animation-play-state
  2. transition-play-state
  3. animation-timing-function
  4. transition-timing-function
← Back to Quizzes