Web: CSS Animations & Transitions
Transitions and animations bring interfaces to life — but they're two distinct CSS tools with different rules. This quiz tests whether you know when to reach for each one, and how to control timing precisely.
Questions cover transition-duration and easing functions, keyframe animations, animation-iteration-count and animation-direction, and properties like animation-fill-mode and animation-play-state.
Know the real difference between a transition and an animation? This quiz will make sure.
Start quiz →
Opens in a new tab on Cletica
Sample questions3 of 14 shown
Q1
Which CSS property is used to define the duration of a transition effect?
Q2
What is the minimum number of keyframes required in a CSS animation?
Q3
Which of the following are valid animation timing functions? (Select all that apply)
What This Quiz Covers
- Transitions vs. keyframe animations
- transition-duration, delay, and timing functions
- Defining @keyframes
- animation-iteration-count and animation-direction
- animation-fill-mode and animation-play-state
- Animatable CSS properties
Cletica
Want to create your own quiz?
Build surveys and quizzes, share with anyone, collect responses — free to start.
Try Cletica for free →