What is the purpose of keyframe animations in SVG graphics?

What effect does specifying infinite for the animation iteration count have in keyframe animations for SVG elements?

A). A) It plays the animation backward

B). B) It pauses the animation after one iteration

C). C) It repeats the animation indefinitely

D). D) It speeds up the animation

Which CSS property is used to define keyframe animations for SVG elements?

A). A) transition

B). B) animation

C). C) transform

D). D) keyframe

Which CSS property is used to apply keyframe animations to an SVG element?

A). A) transition

B). B) transform

C). C) animation

D). D) rotate

How can you create a rotating SVG element using keyframe animations?

A). A) <circle class='circle' cx='50' cy='50' r='30' />

B). B) <rect class='square' x='20' y='20' width='60' height='60' />

C). C) <path class='path' d='M20,50 L180,50' />

D). D) <ellipse class='ellipse' cx='100' cy='100' rx='50' ry='30' />

How can you create a typewriter effect on text in an SVG element using keyframe animations?

A). A) By adjusting the font-size property in CSS

B). B) By defining keyframes for progressively revealing characters

C). C) By setting the text-decoration property to underline

D). D) By adding a typewriter class with predefined styles

What is the purpose of the @keyframes rule in CSS for SVG animations?

A). A) To define keyframes for advanced animations

B). B) To set initial styles for SVG elements

C). C) To create smooth transitions between SVG states

D). D) To apply transformations to SVG elements

Which of the following is an example of a CSS transition for SVG elements?

A). A) .circle:hover { transform: scale(1.5); }

B). B) @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

C). C) .square { animation: movePath 2s linear infinite; }

D). D) .path { stroke-width: 5; transition: stroke-width 0.3s ease; }

How do you pause and resume a CSS animation for an SVG element using JavaScript?

A). A) By setting the animation-play-state property to paused or running

B). B) By changing the display property to none or block

C). C) By adjusting the z-index property to hide or show the element

D). D) By adding a class with the visibility property set to hidden or visible

How do CSS transitions impact the performance of SVG animations?

A). A) They improve performance by reducing animation complexity

B). B) They have no impact on performance

C). C) They can cause performance issues if used excessively or on complex animations

D). D) They make animations slower due to additional calculations

How do keyframe animations differ from CSS transitions in SVG animations?

A). A) Keyframe animations provide smoother transitions than CSS transitions

B). B) Keyframe animations allow for more precise control and complex animations

C). C) Keyframe animations are slower and less efficient than CSS transitions

D). D) Keyframe animations are only suitable for simple animations