Mastering CSS: Animations and Variables

What property is used to define the duration of a CSS animation?

• animation-speed

• animation-duration

• animation-time

• animation-length

How do you create a keyframe animation in CSS?

• Define animations using the 'animate' function in JavaScript only.

• Use @animations to create transitions and apply it with the 'transition' property.

• Keyframe animations are created using the 'transform' property without @keyframes.

• Use @keyframes to define the animation and apply it with the 'animation' property.

What is the purpose of the 'animation-fill-mode' property?

• To set the animation's delay time.

• To control the styles applied before and after an animation runs.

• To define the duration of an animation.

• To specify the animation's keyframes.

Which CSS property is used to change the opacity of an element during an animation?

• visibility

• display

• opacity

• transform

What is the syntax to declare a CSS variable?

• --variable-name: value;

• --variable-name = value;

• variable-name: value;

• $variable-name: value;

How do you access a CSS variable in your styles?

• Use getCSSVariable(--variable-name)

• Access with cssVar(--variable-name)

• Set variable using setVar(--variable-name)

• Use var(--variable-name) to access a CSS variable.

What is the default value of the 'animation-timing-function' property?

• cubic-bezier

• ease-in-out

• linear

• ease

Can CSS variables be used within media queries?

• No, CSS variables cannot be used in media queries.

• CSS variables can only be used in inline styles.

• Media queries do not support any form of variables.

• Yes, CSS variables can be used within media queries.

What is the effect of using 'ease-in-out' in an animation?

• The animation starts slowly and ends abruptly.

• The animation has a jerky motion with no smooth transitions.

• The effect of using 'ease-in-out' is a smooth start and end to the animation, with a faster pace in the middle.

• The animation moves at a constant speed throughout.

How do you define multiple keyframes in a single animation?

• Define keyframes using only one style for the entire animation.

• Use JavaScript to animate without keyframes.

• Apply keyframes only at the start and end of the animation.

• Use the keyframes rule to define multiple keyframes, specifying styles at various percentages.