Practical CSS3 Mastery Course - CSS Animation Keyframes - Part 1

The video tutorial covers CSS animations, starting with setting up the environment and writing boilerplate code. It then moves on to styling elements and applying animations to move them on the screen. The tutorial explains how to define animation properties such as duration and iteration count. Finally, it explores advanced animation techniques, including fill mode and timing functions, to create more dynamic effects.

What is the first step in setting up CSS animations?

• Linking a JavaScript file

• Writing HTML boilerplate code

• Creating a CSS file

• Adding a JavaScript animation library

Which CSS property is used to center text horizontally?

• vertical-align: middle

• text-align: center

• align-items: center

• justify-content: center

What is the purpose of the 'keyframes' rule in CSS animations?

• To set the animation's iteration count

• To outline the animation's intermediate steps

• To specify the animation's name

• To define the animation's duration

Which property determines how many times an animation should repeat?

• animation-iteration-count

• animation-duration

• animation-timing-function

• animation-fill-mode

What does the 'animation-fill-mode' property control?

• The speed of the animation

• The state of the animation before and after it runs

• The number of times the animation repeats

• The direction of the animation

How does the 'ease-in' timing function affect an animation?

• Starts slow and speeds up

• Starts fast and ends slow

• Starts slow, speeds up, then slows down

• Maintains a constant speed

What effect does setting 'animation-duration' to a lower value have?

• Decreases the number of iterations

• Slows down the animation

• Increases the number of iterations

• Speeds up the animation

Which property would you adjust to make an animation run indefinitely?

• animation-timing-function

• animation-iteration-count

• animation-duration

• animation-fill-mode

What happens when 'animation-timing-function' is set to 'ease-out'?

• The animation maintains a constant speed

• The animation starts slow, speeds up, then slows down

• The animation starts slow and speeds up

• The animation starts fast and slows down

Which timing function causes an animation to start slow, speed up, and then slow down again?

• ease-in

• ease-in-out

• ease-out

• linear