CSS Animations & Transitions Flashcards
6 cards from real CSS practice questions. Tap to flip, then mark Knew It or Still Learning — missed cards come back until you master them.
Read the first 6 CSS Animations & Transitions flashcards as text
Which shorthand property combines `transition-property`, `transition-duration`, `transition-timing-function`, and `transition-delay`?
Answer: transition
The `transition` shorthand lets you specify all four transition sub-properties in a single declaration.
What CSS function is commonly used inside `@keyframes` to create smooth color transitions?
Answer: rgb()
The `rgb()` function specifies colors in keyframes, and the browser interpolates between them smoothly during the animation.
Which `animation-play-state` value pauses a running animation?
Answer: paused
Setting `animation-play-state: paused` halts the animation at its current frame without resetting it.
How do you target the starting state of an animation inside `@keyframes`?
Answer: from or 0%
Inside `@keyframes`, `from` is an alias for `0%` and defines the initial state of the animation.
Which CSS property applies a 2D or 3D transformation to an element, often combined with transitions?
Answer: transform
The `transform` property applies functions like `translateX()`, `rotate()`, and `scale()` to visually modify an element.
What is the default value of `animation-fill-mode`?
Answer: none
By default, `animation-fill-mode` is `none`, so the element reverts to its original styles before and after the animation.