@-webkit-keyframes

The CSS   Apple @-rule extension specifies keyframes for CSS visual effect animation properties.

This @-rule is followed by the name of the target animation and a set of style rules. You set the animation name using the  property.

The keyframes selector consists of a list of percentage values or the keywords  or. The selector is used to specify the percentage along the duration of the animation or transition that the keyframes represent. The keyframes are specified by the block of property values declared for the selector. The keyword  is equivalent to the value. The keyword  is equivalent to the value.

The keyframe declaration consists of properties and values. Properties that are not animating are ignored in this rule, with the exception of the  property.

This rule is the last rule encountered in sorted rules order that matches the name of the transition. This rule does not cascade; therefore, an animation never derives keyframes from more than one  rule.

All of the values in selectors are sorted in increasing order by time. If there are any duplicates, the last keyframe specified inside the  rule is used to provide the keyframe information for that time. There is no cascading within a  rule if multiple keyframes specify the same keyframe selector value.

For example, the following  rule contains keyframes for a transition or animation named "wobble". In the first keyframe, shown at the beginning of the animation cycle, the  value of the animation is 100 pixels. After 40% of the animation duration, the value of  is 150 pixels. After 60% of the animation duration, the  value is 75 pixels. At the end of the animation cycle, the  value returns to 100 pixels.

@-webkit-keyframes 'wobble' { 0 {                               left:100px; }

40% {                                 left:150px; }

60% {                                 left:75px; }

100% {                                  left:100px; } }