@keyframes CSS At-Rule
Description
The @keyframes
CSS at- rule sets keyframes when animating an element. The key frame is the properties of the element (transparency, color, position, etc.), which should be applied to the element at a given point in time. Thus, the animation is a smooth transition of style properties from one key frame to another. The browser takes over the calculation of intermediate values between such frames.
Syntax
@keyframes <keyframes-name> { <keyframe-block-list> } where <keyframes-name> = <custom-ident> | <string> <keyframe-block-list> = <keyframe-block>+ where <keyframe-block> = <keyframe-selector># { <declaration-list> } where <keyframe-selector> = from | to | <percentage>
Values
- <custom-ident>A name identifying the keyframe list. This must match the identifier production in CSS syntax.
- fromA starting offset of 0%.
- toAn ending offset of 100%.
- <percentage>A percentage of the time through the animation sequence at which the specified keyframe should occur.
Example
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
Browser Support
Desktop | |||||
10 | 12 | 43 | 16 | 30 | 9 |
Tablets / Mobile | |||||
![]() |
|||||
43 | 43 | 16 | 30 | 9 | 4.0 |
Last updated by CSSPortal on: 1st December 2019