curriculum/challenges/english/blocks/quiz-css-animations/66ed8fc9f45ce3ece4053eae.md
To pass the quiz, you must correctly answer at least 18 of the 20 questions below.
What is the purpose of the transform property in CSS?
To change the visibility of an element.
To apply a visual effect to text.
To set the dimensions of an element.
To modify the position, size, and shape of an element.
How does the CSS animation-direction property affect an animation?
It specifies if an animation should be repeated.
It sets the duration of the animation.
It defines the speed of the animation.
It defines how an animation should play.
Which CSS property makes an animation run 3 times?
animation-repeat: 3
animation-loop: 3
animation-delay: 3
animation-iteration-count: 3
Which CSS timing function makes an animation run at a consistent speed from start to end?
ease
ease-in
ease-in-out
linear
What does the @keyframes at-rule define in CSS?
The colors of a CSS gradient.
The angles of a CSS rotation.
The dimensions of an element.
The stages of a CSS animation.
What is the purpose of the translateX() function in CSS?
It changes the opacity of the element.
It rotates the element.
It repositions the element vertically.
It repositions the element horizontally.
Which of the following is NOT a potential concern with CSS animations?
They may cause discomfort or physical harm to certain users.
Users may find them distracting.
Overuse can lead to poor performance.
They can enhance user experience.
Where is the @keyframes at-rule defined?
Within the body element of an HTML file.
Within the head element of an HTML file.
Within a CSS class definition.
At the top level, outside of any CSS selectors.
Which CSS property allows you to pause and resume an animation?
animation-timing-function
animation-delay
animation-direction
animation-play-state
What value should be assigned to the animation-name property in CSS?
The duration of the animation in seconds.
The timing function used for the animation.
The delay before the animation starts in seconds.
The name of the animation defined by the @keyframes.
What does this @keyframe at-rule do to the animated element?
@keyframes animation {
0% {
transform: translateX(-50px);
}
100% {
transform: translateX(100px);
}
}
It rotates the element 90 degrees clockwise.
It changes the color of the element to blue.
It scales the element to 50% of its initial size and then to 100% of its initial size.
It moves the element horizontally from -50px to 100px, relative to its starting point.
Which CSS property defines how an animation progresses over time?
animation-delay
animation-fill-mode
animation-iteration-count
animation-timing-function
Which CSS property is used to specify that an animation should take 5 seconds to complete?
animation-name: 5s;
animation-delay: 5s;
animation-timing-function: 5s;
animation-duration: 5s;
What does 50% represent in the following CSS @keyframe at-rule?
@keyframes animation {
0% {
transform: translateX(-50px);
}
50% {
transform: translateX(25px);
}
100% {
transform: translateX(100px);
}
}
The starting point of the animation.
The ending point of the animation.
The speed of the animation.
The halfway point of the animation.
What will happen when the property transform: translateX(200px); is applied?
The element will move 200px to the left.
The element will move 200px to the bottom.
The element will rotate 200 degrees clockwise.
The element will move 200px to the right.
How will the animation behave if animation-iteration-count is set to infinite?
It will run once and stop.
It will pause after the first iteration.
It will stop after three iterations.
It will repeat indefinitely.
Which @keyframes selector specifies the starting point of an animation?
50%
25%
100%
0%
What properties can be specified using the animation shorthand CSS property?
Only the name of the animation.
The name and duration of the animation.
The name, duration, and delay of the animation.
All animation properties.
Which CSS property is used to apply an animation defined by an @keyframes at-rule?
animation-duration
apply
translate
animation
Which CSS property allows you to set a time before the animation begins?
animation-fill-mode
animation-timing-function
animation-iteration-count
animation-delay
What does the CSS animation-delay property do?
Sets how long the animation lasts.
Specifies the timing function.
Defines animation direction.
Delays the start of the animation.
Which animation property specifies how the element should be styled before and after the animation?
animation-delay
animation-direction
animation-iteration-count
animation-fill-mode
Why should CSS animations be used in moderation?
Too many CSS animations can lead to styles breaking as well as inconsistent styles across different browsers.
Too many CSS animations can lead to lower or non existent rankings in search engine results.
Too many CSS animations will automatically crash the server and increase the likelihood for security risks.
Too many CSS animations can lead to poor performance and may be distracting or problematic for users with certain accessibility needs.
Which animation property determines whether the animation should play forwards, backwards, or alternate?
animation-fill-mode
animation-delay
animation-timing-function
animation-direction
Which CSS media query detects if the user has requested minimal animations or motion effects?
reduce-motion
min-motion-preference
motion-preferences
prefers-reduced-motion
Which property sets how many times an animation repeats?
animation-duration
animation-count
animation-delay
animation-iteration-count
Which CSS rule is used to define the stages and styles of an animation at various points during its duration?
@style
@transition
@transform
@keyframes
Inside the reduced‑motion media query, which declaration disables transitions?
animation: none;
transition: remove;
animation-play-state: paused;
transition: none;
What does the animation-play-state property allow you to do?
Set how many times the animation repeats.
Specify how long the animation takes to complete.
Determine the direction in which the animation plays.
Pause and resume the animation.
Which of the following is a good practice when working with animations?
Use as many flashing colors and rapid movements as possible to grab attention.
Avoid testing animations on different devices or screen sizes.
Make animations last as long as possible to ensure users notice them.
Avoid content that flashes more than three times per second to prevent triggering seizures or causing discomfort.
Why is the !important declaration used in the CSS rules?
To prevent other media queries from loading.
To limit styles to the first child element.
To debug CSS more easily.
To ensure these rules take precedence over other styles.
What does animation-iteration-count: 1 !important; ensure in CSS?
That animations are paused.
That animations run infinitely.
That animations reverse direction each cycle.
That any looping animations only play once.
What CSS property is used to specify how long an animation should take to complete?
animation-delay
animation-timing-function
animation-iteration-count
animation-duration
Which property is NOT part of the animation shorthand?
animation-delay
animation-timing-function
animation-direction
animation-transform
What does the @keyframes rule define?
The timing function of an animation.
The default state of an element.
The media queries for animations.
The sequence of styles at different points in an animation.
What does this @keyframe at-rule do to the animated element?
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
It scales the element up from 0% to 100%.
It moves the element from left to right.
It changes the text color to black.
It makes the element fade in by gradually decreasing its transparency.
In a keyframes rule, what does 100% represent?
The start of the animation.
The halfway point.
The easing function.
The end of the animation.
Which property controls the pace of an animation over its duration?
animation-duration
animation-delay
animation-iteration-count
animation-timing-function
What should developers consider when implementing animations to maintain accessibility?
Rely entirely on JavaScript for all animations.
Add frequent and intense animations for impact.
Include only bold, fast, and surprising effects.
Use subtle, intentional effects, honor preferences, and offer user control.
Which of the following is the correct syntax to slide an element in from the left?
@keyframes slide-in {
0 {
transform: translate(-100%);
}
100 {
transform: translate(0);
}
}
@keyframes slide-in {
from {
translateX(-100%);
}
to {
translateX(0);
}
}
@keyframes slide-in {
start {
transform: moveX(-100%);
}
end {
transform: moveX(0);
}
}
@keyframes slide-in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}