Animation / Transition / Transformation

Question 1

What is the purpose of the @keyframes property in CSS?

Answer 1

To define animations by specifying keyframes that indicate the start and end points of the animation

@keyframes allows for more complex animations by defining multiple intermediate waypoints.

Question 2

Which attributes are used to control animations in CSS?

Answer 2

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction
• animation-fill-mode
• animation-play-state

These attributes help in customizing the behavior and timing of CSS animations.

Question 3

What is the function of the transition-duration property in CSS?

Answer 3

It specifies the duration of the transition effect

This property determines how long the transition takes to complete.

Question 4

What properties can be managed by transition in CSS?

Answer 4

• transition-duration
• transition-property
• transition-timing-function
• transition-delay

These properties control the timing and the specific CSS properties that will undergo transitions.

Question 5

What is the purpose of the transform property in CSS?

Answer 5

To apply 2D or 3D transformations to an element

Common functions include rotate(), translate(), scale(), and skew().

Question 6

Fill in the blank: The _______ property is used to define the style of animations in CSS.

Answer 6

@keyframes

Question 7

True or False: The transition-property property is used to specify which CSS properties should transition.

Answer 7

True

Question 8

List some common transformation functions used in CSS.

Answer 8

• rotate()
• translate()
• scale()
• skew()

These functions allow for various modifications in position, size, and angle of elements.