CSS: Animations Flashcards
(12 cards)
What are CSS Animations?
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.
What is the @keyframes Rule?
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);
}
}
What is the “animation:” Property?
This is the shorthand property used to apply animations.
What is the “animation-name:” Property?
This specifies the name for the @keyframes rule to use.
What is the “animation-duration:” Property?
This sets how long the animation should take to complete.
What is the “animation-timing-function:” Property?
This defines how the animation progresses over time (such as ease, linear, ease-in-out).
What is the “animation-delay:” Property?
This specifies a delay before the animation starts.
What is the “animation-iteration-count:” Property?
This sets how many times the animation should repeat.
What is the “animation-direction:” Property?
This determines whether the animation should play forwards, backwards, or alternate.
What is the “animation-fill-mode:” Property?
This specifies how the element should be styled before and after the animation.
What is the “animation-play-state:” Property?
This allows you to pause and resume the animation.