← All CSS Flashcard Decks

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
  1. 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.

  2. 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.

  3. 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.

  4. 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.

  5. 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.

  6. 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.