@keyframes
Summary
Sets the keyframes for the CSS animation property.
Examples
Example of prefixed/prefix-free @keyframes blocks
/* defining the animation */
@keyframes fadeInAnimation {
/* starting state */
from {
opacity: 0;
}
/* ending state */
to {
opacity: 1;
}
}
/* applying the animation */
div {
animation: fadeInAnimation linear;
}
Example of an unprefixed @keyframes block that uses percentages to control the keyframes more exactly.
@keyframes bounceFadeInAnimation {
/* starting state (same as "from") */
0% {
opacity: 0;
}
10% {
opacity: 0.4;
}
15% {
opacity: 0;
}
25% {
opacity: 0.6;
}
50% {
opacity: 0;
}
65% {
opacity: 0.8;
}
80% {
opacity: 0;
}
/* ending state (same as "to") */
100% {
opacity: 1;
}
}
Notes
Remarks
The version of this rule using a vendor prefix, @-ms-keyframes, has been deprecated. To ensure compatibility in the future, applications using this rule with a vendor prefix should be updated accordingly. This rule has no default value. This rule is used to specify property values at various points during an animation. The @keyframes rule specifies the property values during one cycle of an animation; the animation may iterate one or more times. This rule uses keyframe selectors to specify property values at various stages of the animation. Keyframe selectors can be declared as from
(equivalent to 0%
), to
(equivalent to 100%
), and one or more percentages. Keyframe selectors use keyframe descriptors to specify the properties and values being animated. If a property cannot be animated, the specification is ignored.
Syntax
@keyframes <identifier> { <keyframes_blocks> };
Parameters
- identifier
- The name of the animation.
keyframes_blocks - A set of keyframes blocks, each of which is composed of keyframe selectors.
Related specifications
- CSS Animations
- W3C Working Draft
See also
Related articles
Animation
@keyframes
Syntax
@keyframes
Other articles
Related pages
- animationNameanimationName
- css/properties/animation/animationcss/properties/animation/animation
Attributions
Microsoft Developer Network: [Windows Internet Explorer API reference Article]