CSS Animation Properties Flashcards
What does the animation-name property do?
The animation-name property specifies the name of the @keyframes animation to be applied to the element.
What is the role of the animation-duration property?
The animation-duration property defines how long it takes for an animation to complete one full cycle. For example, animation-duration: 2s means the animation will last for 2 seconds.
What does the animation-timing-function property control?
The animation-timing-function property controls the speed of the animation over time. It defines how the animation progresses during its duration. Examples include linear (constant speed), ease (default, starts slow, speeds up, then slows down), ease-in, and ease-out.
What does the animation-delay property do?
The animation-delay property specifies the delay before the animation starts. For example, animation-delay: 1s will start the animation 1 second after it’s triggered.
What is the animation-iteration-count property?
The animation-iteration-count property specifies how many times the animation should repeat. You can use numbers (e.g., animation-iteration-count: 3 for 3 repetitions) or infinite to make the animation loop continuously.
How does the animation-direction property affect an animation?
The animation-direction property defines whether the animation should play forwards, backwards, or alternate between forward and backward. Possible values are normal (forward), reverse, and alternate.
What is the animation-fill-mode property?
The animation-fill-mode property specifies how an element should behave before an animation starts and after it ends. For example, using animation-fill-mode: forwards ensures the final state of the animation persists after it ends.
What does the animation-play-state property do?
The animation-play-state property controls whether the animation is running or paused. For instance, animation-play-state: paused will pause the animation.
