MCQs Of Class 21: CSS Animations
1. What is the purpose of the @keyframes rule in CSS?
a) To define a selector for animation
b) To define the transition properties
c) To specify the intermediate steps of an animation
d) To set the duration of an animation
Answer: c) To specify the intermediate steps of an animation
Explanation: @keyframes is used to define the start, intermediate, and end states of an animation.
2. Which property is used to define the duration of a CSS animation?
a) transition-duration
b) animation-duration
c) animation-time
d) duration
Answer: b) animation-duration
Explanation: animation-duration specifies how long an animation should take to complete one cycle.
3. What is the initial value of the transform property in CSS?
a) rotate(0deg)
b) scale(1)
c) translate(0px, 0px)
d) none
Answer: d) none
Explanation: The default value of transform is none, meaning no transformation is applied.
4. Which of the following is a valid CSS animation timing function?
a) ease-in-out
b) zoom
c) rotate
d) transform
Answer: a) ease-in-out
Explanation: ease-in-out is a timing function that specifies the rate of change of an animation. It starts slow, becomes faster, and then slows down again.
5. What does the infinite keyword do in the animation property?
a) It defines the delay time of an animation
b) It makes the animation repeat indefinitely
c) It specifies the number of animation cycles
d) It stops the animation at the final keyframe
Answer: b) It makes the animation repeat indefinitely
Explanation: The infinite keyword causes the animation to repeat forever.
6. Which property in CSS is used to control the delay before an animation starts?
a) animation-delay
b) animation-start
c) delay-time
d) start-delay
Answer: a) animation-delay
Explanation: animation-delay specifies when the animation should begin, delaying the start of the animation.
7. What is the default timing function for CSS animations?
a) linear
b) ease
c) ease-in-out
d) ease-out
Answer: b) ease
Explanation: The default timing function for animations is ease, which starts slow, accelerates in the middle, and slows down at the end.
8. How do you define a rotating animation in CSS?
a) @keyframes rotate
b) transform: rotate()
c) @keyframes rotateX()
d) Both a and b
Answer: d) Both a and b
Explanation: A rotating animation can be defined using @keyframes with the rotate() function in the transform property.
9. What does the scale() transform function do?
a) Changes the position of an element
b) Changes the size of an element
c) Rotates an element
d) Skews an element
Answer: b) Changes the size of an element
Explanation: The scale() function in CSS increases or decreases the size of an element.
10. Which of the following properties is used to define the number of cycles for an animation in CSS?
a) animation-cycle
b) animation-count
c) animation-iteration-count
d) animation-repetition
Answer: c) animation-iteration-count
Explanation: The animation-iteration-count property defines how many times an animation cycle should repeat.
11. Which of the following values can be used for the animation-timing-function property?
a) bounce
b) ease-in
c) pause
d) start
Answer: b) ease-in
Explanation: ease-in makes the animation start slow and then speed up toward the end.
12. Which property is used to apply an animation to an element?
a) animation-property
b) animation-name
c) animation-class
d) transform
Answer: b) animation-name
Explanation: The animation-name property specifies the name of the @keyframes animation to be applied.
13. What is the effect of the transform-style: preserve-3d property?
a) It makes all transformations applied in 2D space
b) It preserves 3D transformations
c) It disables all transformations
d) It rotates the element on the Z-axis
Answer: b) It preserves 3D transformations
Explanation: preserve-3d ensures that child elements will be rendered in 3D space.
14. In CSS, which of the following defines a 3D flipping effect?
a) rotateY()
b) scale3d()
c) rotate3d()
d) translate3d()
Answer: a) rotateY()
Explanation: The rotateY() function rotates the element around the Y-axis, creating a 3D flip effect.
15. How is the scale(1) transformation interpreted?
a) The element is flipped horizontally
b) The element is rotated 180 degrees
c) The element remains unchanged in size
d) The element is enlarged
Answer: c) The element remains unchanged in size
Explanation: scale(1) means no scaling is applied, and the element retains its original size.
16. How can you stop a CSS animation once it has completed?
a) By setting animation-iteration-count: 1
b) By setting animation-repeat: none
c) By setting animation-play-state: paused
d) By setting animation-duration: 0
Answer: a) By setting animation-iteration-count: 1
Explanation: Setting animation-iteration-count: 1 ensures the animation runs only once.
17. Which of the following CSS properties is responsible for controlling the background color of an animated element?
a) animation-background-color
b) background-color
c) animation-color
d) color
Answer: b) background-color
Explanation: The background-color property controls the background color of an element during an animation.
18. What is the effect of the rotateY(180deg) transformation?
a) Rotates the element around the X-axis
b) Rotates the element around the Y-axis
c) Enlarges the element
d) Shrinks the element
Answer: b) Rotates the element around the Y-axis
Explanation: rotateY(180deg) rotates the element 180 degrees around the Y-axis.
19. Which property is used to pause an animation in CSS?
a) animation-stop
b) animation-play-state
c) animation-pause
d) pause-animation
Answer: b) animation-play-state
Explanation: The animation-play-state property controls whether the animation is running or paused.
20. How would you make an element appear and disappear repeatedly using an animation?
a) Using fade-in and fade-out properties
b) Using animation-iteration-count: infinite
c) Using opacity and transform properties
d) Both b and c
Answer: d) Both b and c
Explanation: The opacity and transform properties, in combination with animation-iteration-count: infinite, can create a continuous fading effect.
21. In CSS, what does animation-fill-mode: forwards do?
a) It starts the animation immediately after the previous one ends
b) It applies the styles defined in the final keyframe after the animation ends
c) It resets the styles to their initial state after the animation ends
d) It stops the animation halfway through
Answer: b) It applies the styles defined in the final keyframe after the animation ends
Explanation: animation-fill-mode: forwards ensures the final keyframe's styles are retained after the animation ends.
22. Which of the following can be used to make an element grow and shrink in CSS animation?
a) scale()
b) rotate()
c) translate()
d) perspective()
Answer: a) scale()
Explanation: The scale() transform is used to grow or shrink an element in CSS.
23. How is an element’s position altered in CSS?
a) Using transform: translate()
b) Using position: absolute
c) Using top and left properties
d) All of the above
Answer: d) All of the above
Explanation: Elements can be positioned using transform, position, and top/left properties.
24. What is the effect of the rotate(360deg) transform function?
a) Rotates the element by 90 degrees
b) Rotates the element by 180 degrees
c) Rotates the element by 360 degrees
d) Scales the element by 360 degrees
Answer: c) Rotates the element by 360 degrees
Explanation: rotate(360deg) performs a full rotation of the element.
25. Which CSS property defines the behavior of an animation?
a) animation-state
b) animation-options
c) animation-behavior
d) animation
Answer: d) animation
Explanation: The animation shorthand property combines all animation-related properties into a single declaration.
26. Which transform function in CSS is used to move an element in 2D space?
a) rotate()
b) scale()
c) translate()
d) skew()
Answer: c) translate()
Explanation: translate() moves an element along the X and Y axes.
27. What does the animation-direction: alternate property do?
a) The animation runs in a reverse direction after each cycle
b) The animation repeats in one direction
c) The animation stops after one cycle
d) The animation reverses its speed
Answer: a) The animation runs in a reverse direction after each cycle
Explanation: animation-direction: alternate causes the animation to reverse after each cycle, creating a back-and-forth effect.
28. How do you define a keyframe animation that rotates an element from 0 to 180 degrees?
a) @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }
b) @keyframes rotate { 0% { transform: rotate(180deg); } 100% { transform: rotate(0deg); } }
c) @keyframes rotate { transform: rotate(180deg); }
d) @keyframes rotate { transform: rotate(0deg); }
Answer: a) @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } }
Explanation: The @keyframes rule defines an animation with a starting and ending point, rotating from 0deg to 180deg.
29. How can you control the speed of an animation in CSS?
a) Using animation-duration
b) Using animation-delay
c) Using animation-timing-function
d) Both a and c
Answer: d) Both a and c
Explanation: animation-duration controls the speed of the animation, while animation-timing-function adjusts the pacing.
30. What does the animation-fill-mode: both property do?
a) Applies the styles of the initial keyframe after the animation ends
b) Applies the styles of the final keyframe before the animation starts
c) Keeps both the initial and final states after the animation completes
d) Resets the element to its initial state after the animation ends
Answer: c) Keeps both the initial and final states after the animation completes
Explanation: animation-fill-mode: both ensures the initial and final keyframe styles are retained during and after the animation.
31. How do you apply an infinite bounce effect using CSS animations?
a) By using @keyframes with translateY() and animation-iteration-count: infinite
b) By using scaleY() and animation-direction: alternate
c) By using rotate() with animation-timing-function: bounce
d) By using translateX() with animation-fill-mode: forwards
Answer: a) By using @keyframes with translateY() and animation-iteration-count: infinite
Explanation: You can create a bounce effect by applying translateY() in @keyframes and using animation-iteration-count: infinite to repeat the animation forever.
32. Which of the following CSS properties is used to define the speed curve of an animation?
a) animation-timing-function
b) animation-speed
c) animation-direction
d) animation-fill-mode
Answer: a) animation-timing-function
Explanation: animation-timing-function specifies the speed curve of an animation (e.g., ease-in, linear).
33. What does the rotateX(90deg) transformation do?
a) Rotates the element 90 degrees around the X-axis
b) Rotates the element 90 degrees around the Y-axis
c) Rotates the element 90 degrees around the Z-axis
d) Scales the element 90 degrees
Answer: a) Rotates the element 90 degrees around the X-axis
Explanation: rotateX(90deg) rotates the element around the X-axis.
34. What does the animation-iteration-count property define?
a) The number of times an animation runs
b) The duration of each animation cycle
c) The delay time before the animation starts
d) The time between animation cycles
Answer: a) The number of times an animation runs
Explanation: animation-iteration-count specifies how many times the animation will repeat.
35. How can you make an animation run only once in CSS?
a) By setting animation-iteration-count: 1
b) By setting animation-duration: 1s
c) By setting animation-fill-mode: forwards
d) By setting animation-timing-function: linear
Answer: a) By setting animation-iteration-count: 1
Explanation: animation-iteration-count: 1 ensures the animation runs only once.
36. Which CSS property can be used to set the point around which an element is transformed?
a) transform-origin
b) animation-origin
c) rotate-origin
d) translate-origin
Answer: a) transform-origin
Explanation: transform-origin specifies the origin point for transformations like rotation and scaling.
37. What is the default value of the animation-play-state property?
a) paused
b) running
c) none
d) stopped
Answer: b) running
Explanation: The default value of animation-play-state is running, meaning the animation is playing by default.
38. Which CSS property is used to create a 3D effect when animating elements?
a) perspective
b) scale3d
c) transform-style
d) all
Answer: a) perspective
Explanation: The perspective property gives a 3D effect to child elements when combined with 3D transforms.
39. Which of the following would you use to animate an element’s position?
a) translateX()
b) translate()
c) rotateX()
d) scale()
Answer: b) translate()
Explanation: translate() moves an element along the X and Y axes, making it suitable for position animation.
40. What does animation-direction: reverse do?
a) The animation runs in reverse order
b) The animation restarts from the beginning
c) The animation runs forward
d) The animation stops
Answer: a) The animation runs in reverse order
Explanation: animation-direction: reverse causes the animation to run in the reverse order.
41. Which of the following can be used to delay an animation?
a) animation-time
b) animation-delay
c) animation-wait
d) animation-start
Answer: b) animation-delay
Explanation: animation-delay specifies a delay before the animation starts.
42. Which of the following defines a 3D rotation around the X-axis?
a) rotateX(45deg)
b) rotateY(45deg)
c) rotate(45deg)
d) rotate3d(1, 1, 0, 45deg)
Answer: a) rotateX(45deg)
Explanation: rotateX(45deg) rotates the element around the X-axis by 45 degrees.
43. How do you create an infinite looping animation?
a) By setting animation-repeat: infinite
b) By setting animation-iteration-count: infinite
c) By setting animation-direction: reverse
d) By setting animation-play-state: running
Answer: b) By setting animation-iteration-count: infinite
Explanation: Setting animation-iteration-count: infinite causes the animation to loop indefinitely.
44. How do you define multiple animations for the same element in CSS?
a) Using animation: animation1, animation2
b) Using animation-multiple: true
c) Using animations: 2
d) Using animation-all
Answer: a) Using animation: animation1, animation2
Explanation: Multiple animations can be applied to an element by separating them with commas.
45. What does the @keyframes rule define?
a) The visual state of an animation at each point in time
b) The speed of an animation
c) The total duration of an animation
d) The direction of an animation
Answer: a) The visual state of an animation at each point in time
Explanation: The @keyframes rule defines the different states or steps of an animation.
46. Which CSS property controls the delay before the start of an animation?
a) animation-wait
b) animation-start
c) animation-delay
d) animation-duration
Answer: c) animation-delay
Explanation: animation-delay specifies how long to wait before the animation begins.
47. What does the animation-timing-function property do?
a) Defines the overall duration of an animation
b) Defines the starting and ending points of the animation
c) Controls the speed curve of an animation
d) Specifies the direction of the animation
Answer: c) Controls the speed curve of an animation
Explanation: animation-timing-function specifies the speed curve, such as ease, linear, or ease-in.
48. Which of the following CSS functions is used to rotate an element in 3D space?
a) rotateX()
b) rotateY()
c) rotate3d()
d) rotate()
Answer: c) rotate3d()
Explanation: rotate3d() rotates an element in 3D space, allowing rotation around any axis.
49. What is the effect of scale(1.5) on an element?
a) Scales the element 1.5 times larger in both X and Y directions
b) Scales the element 1.5 times smaller
c) Rotates the element 1.5 times
d) Skews the element 1.5 times
Answer: a) Scales the element 1.5 times larger in both X and Y directions
Explanation: scale(1.5) enlarges the element by a factor of 1.5.
50. Which CSS property is used to specify the number of iterations for an animation?
a) animation-repeat
b) animation-iteration-count
c) animation-duration
d) animation-delay
Answer: b) animation-iteration-count
Explanation: animation-iteration-count controls how many times the animation should run.
No comments:
Post a Comment