@keyframes
@keyframes
This page has been flagged with the following issues:
High-level issues:
W3C Working Draft
Summary
Sets the keyframes for the CSS animation property.
Examples
View live exampleExample of prefixed/prefix-free @keyframes blocks
CSS
/* defining the animation */
@keyframes fadeInAnimation {
/* starting state */
from {
opacity: 0;
}
/* ending state */
to {
opacity: 1;
}
}
@-moz-keyframes fadeInAnimation {
/* starting state */
from {
opacity: 0;
}
/* ending state */
to {
opacity: 1;
}
}
@-ms-keyframes fadeInAnimation {
/* starting state */
from {
opacity: 0;
}
/* ending state */
to {
opacity: 1;
}
}
@-webkit-keyframes fadeInAnimation {
/* starting state */
from {
opacity: 0;
}
/* ending state */
to {
opacity: 1;
}
}
@-o-keyframes fadeInAnimation {
/* starting state */
from {
opacity: 0;
}
/* ending state */
to {
opacity: 1;
}
}
/* applying the animation */
div {
animation: fadeInAnimation linear;
-moz-animation: fadeInAnimation linear;
-ms-animation: fadeInAnimation linear;
-webkit-animation: fadeInAnimation linear;
-o-animation: fadeInAnimation linear;
}
View live exampleExample of an unprefixed @keyframes block that uses percentages to control the keyframes more exactly.
CSS
@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.
Standards information
- CSS Animations Module Level 3, Section 2
Compatibility
Desktop
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic Support | 4.0 -webkit |
16.0 5.0 -moz |
10 | 12.10 12 -o |
4.0 -webkit
|
Mobile
| Feature | Android | BlackBerry | Chrome for mobile | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Opera Mini | Safari Mobile |
|---|---|---|---|---|---|---|---|---|
| Basic Support | 4.0 -webkit |
7.0 -webkit |
18.0 -webkit |
15.0 -moz |
? | 12.1 | Unsupported | 3.2 -webkit
|
| Partial Support | 2.1 -webkit |
Unsupported | Unsupported | Unsupported | 10 | Unsupported | Unsupported | Unsupported |
Compatibility notes
| Browser | Version | Note |
|---|---|---|
| iOS Safari | all | Only some properties are hardware accelerated, this is also the case with transitions. Known properties are: opacity, translate3d. There may be more, but it is hard to find documentation for this. |
See also
Related articles
Animation
- @keyframes
Syntax
- @keyframes
Other articles
Related pages (MSDN)
This article contains content originally from external sources.
Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]
This tool helps to make and review comments inline.
How to Use
insert instructions, with images, here