Animations Flashcards
What is a keyframe in CSS animations?
A keyframe assigns animation states to timestamps on a timeline, marking where animations start and end.
What does the @keyframes rule do in CSS?
It defines a custom animation sequence, referencing the animation states through timestamps.
What are the keywords used in the @keyframes rule?
The keywords are from (0%) and to (100%).
How can you add multiple positions in a @keyframes animation?
You can add as many positions as needed along the timeframe by specifying different percentages, e.g., 0%, 50%, 100%.
What does the animation-duration property define?
It defines how long the @keyframes timeline should run.
What is the default value for animation-duration?
The default value is 0 seconds.
What is the purpose of the animation-timing-function property?
It recreates natural motion in animations by controlling the pace of the animation.
Name some common values for animation-timing-function.
linear, ease, ease-in, ease-out, ease-in-out.
What does the animation-iteration-count property define?
It defines how many times the @keyframes timeline should run.
What is the default value for animation-iteration-count?
The default value is 1 time.
What does the animation-direction property control?
It controls which direction the timeline runs: normal (default), reverse, or alternate.
What is the purpose of the animation-delay property?
It specifies how long the browser should wait before starting the animation.
How does the animation shorthand property work?
It defines all animation properties in order.
