Animation
CSS animations make it possible to animate transitions from one CSS style configuration to another. Animations consist of two components, a style describing the CSS animation and a set of keyframes that indicate the start and end states of the animation’s style, as well as possible intermediate waypoints.
# Animation: (shortend property)
A shorthand property for setting the following properties in a single declaration: animation-name | animation-duration | animation-timing-function | animation-delay | animation-direction | animation-iteration-count | animation-fill-mode | animation-play-state.
# Animation-Name
Declares the name of the animation as it was defined in the @keyframes rule.
# Animation-Duration
The length of time (in seconds or milliseconds) it takes for an animation to complete one cycle.
# Animation-Timing-Function
Establishes preset acceleration curves such as ease or linear.
Values: ease | ease-in | ease-out | ease-in-out | linear | cubic-bezier(x1, y1, x2, y2).
# Animation-Delay
Defines the time (in seconds or milliseconds) that should pass before the animation should start.
# Animation-Direction
Sets the direction of the animation after the cycle.
Values: normal | reverse | alternate | alternate-reverse.
# Animation-Iteration-Count
The number of times the animation should be performed.
# Animation-Fill-Mode
Sets in what state of the keyframes rule the animation should retain after it ended.
Values: forwards | backwards | both | none.
# Animation-Play-State
Sets in what state of the keyframes rule the animation should retain after it ended.
Values: paused | running.
# @Keyframes
The @keyframes CSS at-rule controls the intermediate steps in a CSS animation sequence by defining styles for keyframes (or waypoints) along the animation sequence. This gives more control over the intermediate steps of the animation sequence than transitions.
The Steps can be defined as a percentage or as steps (from / to).