CSS CSS Animations & Transitions 2 — Questions and Answers
Question 1: Which shorthand property combines `transition-property`, `transition-duration`, `transition-timing-function`, and `transition-delay`?
- transition (Correct answer)
- animate
- motion
- transform
Correct answer: transition
The `transition` shorthand lets you specify all four transition sub-properties in a single declaration.
Question 2: What CSS function is commonly used inside `@keyframes` to create smooth color transitions?
- rgb() (Correct answer)
- blend()
- mix()
- lerp()
Correct answer: rgb()
The `rgb()` function specifies colors in keyframes, and the browser interpolates between them smoothly during the animation.
Question 3: Which `animation-play-state` value pauses a running animation?
- paused (Correct answer)
- stopped
- hold
- freeze
Correct answer: paused
Setting `animation-play-state: paused` halts the animation at its current frame without resetting it.
Question 4: How do you target the starting state of an animation inside `@keyframes`?
- from or 0% (Correct answer)
- start or 0%
- begin or 0%
- first or 0%
Correct answer: from or 0%
Inside `@keyframes`, `from` is an alias for `0%` and defines the initial state of the animation.
Question 5: Which CSS property applies a 2D or 3D transformation to an element, often combined with transitions?
- transform (Correct answer)
- translate
- rotate
- perspective
Correct answer: transform
The `transform` property applies functions like `translateX()`, `rotate()`, and `scale()` to visually modify an element.
Question 6: What is the default value of `animation-fill-mode`?
- none (Correct answer)
- forwards
- backwards
- both
Correct answer: none
By default, `animation-fill-mode` is `none`, so the element reverts to its original styles before and after the animation.
CSS CSS Animations & Transitions 2
Which shorthand property combines `transition-property`, `transition-duration`, `transition-timing-function`, and `transition-delay`?