back

@Keyframes

Keyframes are used to create animations, along with the animation-properties. Keyframes require 3 values.

(1) Name: This defines the name of the animation.
(2) Keyframe Selector: This is the percentage of the animation duration, so 50% is halfway through etc.
(3) Styles: These are the CSS styles to be applied to each selector.

Syntax:
@keyframes Name {
Selector { Styles }
Selector { Styles }
Selector { Styles }
Selector { Styles }
}

For maximum browser support, you should use the following prefixes:
(1) @keyframes:
(2) @-webkit-keyframes

Example