Animations

Keyframes

@keyframes at-rule defines what should happen at specific moments during the animation. For example, 0% is the beginning of the animation and 100% is the end. These keyframes can then be controlled either by the shorthand animation property, or its eight sub-properties, to give more control over how those keyframes should be manipulated.

Sub Properties of @keyframes/animations

• animation-name: declares the name of the @keyframes at-rule to manipulate.
• animation-duration: the length of time it takes for an animation to complete one cycle.
• animation-timing-function: establishes preset acceleration curves such as ease or linear.
• animation-delay: the time between the element being loaded and the start of the animation sequence.
• animation-direction: sets the direction of the animation after the cycle. Its default resets on each cycle.
• animation-iteration-count: the number of times the animation should be performed.
• animation-fill-mode: sets which values are applied before/after the animation.
• animation-play-state: pause/play the animation. For example, you can set the last state of the animation to remain on screen, or you can set it to switch back to before when the animation began.

Transitions

Animations

Libraries