abstract
| - The CSS @-webkit-keyframes 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 <a href="/mediawiki/-webkit-animation-name" title="-webkit-animation-name">-webkit-animation-name</a> property. The keyframes selector consists of a list of percentage values or the keywords from 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 0. The keyword to is equivalent to the value 100. The keyframe declaration consists of properties and values. Properties that are not animating are ignored in this rule, with the exception of the <a href="/mediawiki/-webkit-animation-timing-function" title="-webkit-animation-timing-function">-webkit-animation-timing-function</a> 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. All of the values in selectors are sorted in increasing order by time. If there are any 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 specify the same keyframe selector value. For example, the following @-webkit-keyframes rule contains keyframes for a transition or animation named "wobble". In the first keyframe, shown at the beginning of the animation cycle, the left value of the animation is 100 pixels. After 40% of the animation duration, the value of left is 150 pixels. After 60% of the animation duration, the left value is 75 pixels. At the end of the animation cycle, the left value returns to 100 pixels. @-webkit-keyframes 'wobble' { 0 { left:100px; } 40% { left:150px; } 60% { left:75px; } 100% { left:100px; } }
|