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
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
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)
Cletica
Want to create your own quiz?
Build surveys and quizzes, share with anyone, collect responses — free to start.
Try Cletica for free →