Specifies a list of property animation keyframes for an object in the HTML document.
  |
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.
Standards information
- CSS Animations Module Level 3, Section 2
Remarks
This rule has no default value.
The @keyframes 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. If either the "from" (or "0%") or "to" (or "100%") selector is omitted, the missing keyframe is constructed using the computed values of the properties being animated.
Keyframe selectors use keyframe descriptors to specify the properties and values being animated. If a property can't be animated, the declaration is ignored.
Do not use the Microsoft vendor prefix ("-ms-") before the Cascading Style Sheets (CSS) animations properties. They are supported unprefixed in Internet Explorer 10 and later.
To learn more about CSS animations, see How to bring your webpage to life with CSS transforms, transitions, and animations.
Examples
The following example demonstrates three keyframe selectors, each with two keyframe descriptors.
@keyframes myAnimation {
from {
left: 100px;
right: 50px;
}
50% {
left: 50px;
right: 10px;
}
to {
left: 10px;
right: 10px;
}
}
See also
- animation-name
- How to bring your webpage to life with CSS transforms, transitions, and animations
- Internet Explorer 10 Guide for Developers: CSS Animations
Send comments about this topic to Microsoft
Build date: 11/29/2012
