CSS CSS Animations & Transitions 1 — Questions and Answers
Question 1: Which CSS property is used to specify the duration of a transition effect?
- transition-duration (Correct answer)
- transition-delay
- transition-speed
- animation-duration
Correct answer: transition-duration
The `transition-duration` property sets how long a CSS transition takes to complete.
Question 2: Which CSS at-rule is used to define keyframes for an animation?
- @keyframes (Correct answer)
- @animation
- @frames
- @motion
Correct answer: @keyframes
The `@keyframes` at-rule lets you define the stages of a CSS animation by specifying styles at various percentage points.
Question 3: What value of `animation-fill-mode` keeps the element styled by the last keyframe after the animation ends?
- forwards (Correct answer)
- backwards
- both
- none
Correct answer: forwards
The `forwards` value retains the styles defined in the final keyframe once the animation has completed.
Question 4: Which CSS property controls the speed curve of a transition or animation?
- transition-timing-function (Correct answer)
- transition-speed
- animation-rate
- animation-curve
Correct answer: transition-timing-function
The `transition-timing-function` property specifies the speed curve (e.g., ease, linear, ease-in-out) for the transition.
Question 5: Which keyword value for `animation-iteration-count` causes an animation to repeat indefinitely?
- infinite (Correct answer)
- forever
- loop
- repeat
Correct answer: infinite
Setting `animation-iteration-count: infinite` makes the animation loop continuously without stopping.
Question 6: What does `animation-direction: alternate` do?
- Plays forward on odd iterations and backward on even iterations (Correct answer)
- Plays only in reverse
- Plays forward then stops
- Alternates between two different animations
Correct 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.
CSS CSS Animations & Transitions 1
Which CSS property is used to specify the duration of a transition effect?