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 CSS property is used to specify the duration of a transition effect?
Answer: transition-duration
The `transition-duration` property sets how long a CSS transition takes to complete.
Which CSS at-rule is used to define keyframes for an animation?
Answer: @keyframes
The `@keyframes` at-rule lets you define the stages of a CSS animation by specifying styles at various percentage points.
What value of `animation-fill-mode` keeps the element styled by the last keyframe after the animation ends?
Answer: forwards
The `forwards` value retains the styles defined in the final keyframe once the animation has completed.
Which CSS property controls the speed curve of a transition or animation?
Answer: transition-timing-function
The `transition-timing-function` property specifies the speed curve (e.g., ease, linear, ease-in-out) for the transition.
Which keyword value for `animation-iteration-count` causes an animation to repeat indefinitely?
Answer: infinite
Setting `animation-iteration-count: infinite` makes the animation loop continuously without stopping.
What does `animation-direction: alternate` do?
Answer: Plays forward on odd iterations and backward on even iterations
With `alternate`, the animation plays forward on odd cycles and in reverse on even cycles, creating a back-and-forth effect.