A set of keyframes at-rules define styles for different states of the animation on the intermediate steps of the animation sequence. Each keyframe includes an identifier, keyframe selectors and styles. General syntax:
Keyframes selectors take either percentage values or keywords –
from keyword is equivalent to the
0% value and the
to keyword is
equivalent to the
The property defines the one or more animation name that is set in
Using two dashes at the beginning of the animation’s name is not allowed (ex. --myMoves or --bouncing).
The property specifies the duration that takes one animation’s iteration. It takes a value as seconds (s) and milliseconds (ms).
animation-delay property specifies time before animation starts and
iterates. It also takes either seconds (s) or milliseconds (ms) as a value.
The initial value is
The property configures the number of iteration. The default value is 1. The
property may take a number or the
infinite keywords as a value.
The property defines the animation flow over one iteration. It takes either keyword or Cubic Bezier curve function or steps function as a value. Keyword values are calculated via Cubic Bezier function and in the most cases:
linear- the same speed during the whole animation;
ease (default)- slow start, fast middle, slow end;
ease-in- slow start and gradually increasing speed until the end;
ease-out- fast start and gradually slowing down speed until the end;
ease-in-out- slow start, increasing speed in the middle and slowing down in the end.
The property specifies the direction of animation’s progression through the keyframes. It defines where the animation starts and ends first and at each iteration. It takes four values:
normal (default)- the animation is played forward;
reverse- the animation is played backward;
alternate- first the animation is played forward, then backward;
alternate-reverse- first the animation is played backward, then forward.
The property configures whether or not animation’s styles are applied before the start and after the end of the animation’s execution. It takes four values:
none (default)- no styles are applied before and after execution;
forward- the styles that are set by the last keyframe is preserved;
backward- the styles that are set by the first keyframe is preserved;
both- the styles that are set by the first and the last keyframes are preserved.
The property defines whether the animation is paused or running. It takes either
running or paused values. The
running value is by default.
A shorthand property that lets you set all animation properties at once. The syntax: