CSS: Animations

Question 1

What are CSS Animations?

Answer 1

CSS animations allow you to create dynamic, visually engaging effects on web pages without the need for JavaScript or complex programming. They provide a way to smoothly transition elements between different styles over a specified duration.

Question 2

What is the @keyframes Rule?

Answer 2

This rule defines the stages and styles of the animation. It specifies what styles the element should have at various points during the animation.

@keyframes slide-in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}

Question 3

What is the “animation:” Property?

Answer 3

This is the shorthand property used to apply animations.

Question 4

What is the “animation-name:” Property?

Answer 4

This specifies the name for the @keyframes rule to use.

Question 5

What is the “animation-duration:” Property?

Answer 5

This sets how long the animation should take to complete.

Question 6

What is the “animation-timing-function:” Property?

Answer 6

This defines how the animation progresses over time (such as ease, linear, ease-in-out).

Question 7

What is the “animation-delay:” Property?

Answer 7

This specifies a delay before the animation starts.

Question 8

What is the “animation-iteration-count:” Property?

Answer 8

This sets how many times the animation should repeat.

Question 9

What is the “animation-direction:” Property?

Answer 9

This determines whether the animation should play forwards, backwards, or alternate.

Question 10

What is the “animation-fill-mode:” Property?

Answer 10

This specifies how the element should be styled before and after the animation.

Question 11

What is the “animation-play-state:” Property?

Answer 11

This allows you to pause and resume the animation.