{@keyframes} At Keyframes Rule | CSS: Presentation Layer

Standards Based Development

WebKit Keyfreames @-webkit-keyframes

@-webkit-keyframes rule (At WebKit Keyframes Rule) is followed by the name of the target animation and a set of style rules. Set the animation name using the -webkit-animation-name property.

The keyframes selector consists of a list of percentage values or the keywords from and/or to. 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 from is equivalent to the value of 0 and keyword to is equivalent to the value of 100.

The keframe declaration consists of properties and values; properties that are not animating are ignored in this rule, with the exception of -webkit-animation-timing-function 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 @-webkit-keyframes rule.

Supporte css Rules

All of the values in the selectors are sorted in increasing order by time. If there are duplicates, the last keyframe specified inside the @-webkit-keyframes rule is used to provide the keyframe information for that time.

There is no cascading within a @-webkit-keyframes rule if multiple keyframes specifty the same keyframe selector value.

It is possible to use an @-webkit-keyframes rule to set a timing function to animate or transition from one keyframe to another, simply set the timing function for a keyframe within its block using -webkit-animation-timing-function property, like so:

@ rule (At Rule).


@-webkit-keyframes 'bounce' {
  from {top:100px; -webkit-animation-timing-function:ease-out} 
      25% {top:50px; -webkit-animation-timing-function:ease-in}
      50% {top:100px; -webkit-animation-timing-function:ease-out}
      75% {top:75px; -webkit-animation-timing-function:ease-in}
  to {top:100px}
}

The above @-webkit-keyframes rule defines keyframes for a transition or animation named bounce. Between the first and second keyframes, an ease-out timing function is used; between the second and third keyframes an ease-in timing function is used. As a result, the element moves up the document by 50 pixels, slowing down as it reaches its highest point, then speeds up as it falls back to 100 pixels. The second half of the animation behaves in a similar manner, but moves the element only 25 pixels up the document.

Supporte css Rules

Keyframes provide finer control over the intermediate values of animating property(ies); specified using a&#rule syntax: @keyframes {}; the name of the animation follows at-rule declaration, which is then followed by the set of style declarations for the keyframe.

Keyframe selectors are percentage values (comma-separated) or keywords "from" and "to", which are used to specify the length of time (in percentage(s)) of the animation that the keyframe represents.

Note: the keyword "from" is equivalent to "0", and "to" is equivalent to "100%". Double Note: the percentage unit specifier must be used on percentage values, therefore "0" is an invalid keyframe selector.

Keyframe declarations must have a keyframe rule for 0% or 100% (or "from" and "to"); omitting these keyframe selectors results in an inavalid keyframe declaration that will not be available for animation.

The block of property values declared in the keyframe selectors represents the keyframe itself. The selectors determine the keyframe's placement during the animation.

Keyframe can be specified in any order.

The keyframe declaration for a keyframe rule consists of typical property declarations, however only certain properties are animatable; properties that are not animatable and yet still reside in a keyframe declaration are igonred, with the exception of animation-timing-function.

An animation's @keyframes rule is the last one encountered in sorted rules order that matches the name of the animation.

@keyframes rules do not cascade, and therefore an animation will never derive keyframes from more than one @keyframes rule.

The set of keyframes is determined sorting all of the selectors values in increasing order by time. Should there be any duplicates, the last specified @keyframes rule is used to provide the keyframe information for that time interval.

There is no cascading within an @keyframes rule if multiple keyframes specify the identical keyframe selector values.