CSS @keyframes Rule

Example

Make an element move gradually 200px down:
@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}}
Try it Yourself »
More "Try it Yourself" examples below.

Definition and Usage

The @keyframes rule specifies the animation code.
The animation is created by gradually changing from one set of CSS styles to another.
During the animation, you can change the set of CSS styles many times.
Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.
Tip: For best browser support, you should always define both the 0% and the 100% selectors.
Note: Use the animation properties to control the appearance of the animation, and also to bind the animation to selectors.
Note: The !important rule is ignored in a keyframe (See last example on this page).

Browser Support

The numbers in the table specifies the first browser version that fully supports the rule.
Numbers followed by -webkit-, -moz- or -o- specify the first version that worked with a prefix.
Property
@keyframes43.0
4.0 -webkit-		10.016.0
5.0 -moz-		9.0
4.0 -webkit-		30.0
15.0 -webkit-
12.0 -o-

CSS Syntax

@keyframes animationname {keyframes-selector {css-styles;}}

Property Values

ValueDescription
animationnameRequired. Defines the name of the animation.
keyframes-selectorRequired. Percentage of the animation duration.
Legal values:
0-100%
from (same as 0%)
to (same as 100%)
Note: You can have many keyframes-selectors in one animation.
css-stylesRequired. One or more legal CSS style properties

Comments

Post a Comment

Popular posts from this blog

Define closure ?

Define closure. In JavaScript, we need closures when a variable which is defined outside the scope in reference is accessed from some inner scope. var  num  =  10 ;   function sum()    {   document.writeln(num+num);   }    sum();  
Read more

CSS Layout - The position Property

Image
The  position  property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky). The position Property The  position  property specifies the type of positioning method used for an element. There are five different position values: static relative fixed absolute sticky Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the  position  property is set first. They also work differently depending on the position value. position: static; HTML elements are positioned static by default. Static positioned elements are not affected by the top, bottom, left, and right properties. An element with  position: static;  is not positioned in any special way; it is always positioned according to the normal flow of the page: This <div> element has position: static; Here is the CSS that is used: div.static  {   position :  static ;   
Read more