mozilla

Compare Revisions

@keyframes

Change Revisions

Revision 22066:

Revision 22066 by Marcoos on

Revision 22067:

Revision 22067 by Sheppy on

Title:
@keyframes
@keyframes
Slug:
CSS/@keyframes
CSS/@keyframes
Tags:
css, NeedsTechnicalReview, NeedsBrowserCompatibility, "CSS Reference", animation, NeedsMobileBrowserCompatibility
css, NeedsTechnicalReview, NeedsBrowserCompatibility, "CSS Reference", animation, NeedsMobileBrowserCompatibility
Content:

Revision 22066
Revision 22067
nn34    <p>
35      {{ h3_gecko_minversion("Duplicate resolution", "6.0") }}
36    </p>
37    <p>
38      If multiple keyframe sets exist for a given name, the last 
 >one encountered is used. <code>@keyframes</code> rules don't casc
 >ade, so animations never drive keyframes from more than one rule 
 >set.
39    </p>
40    <p>
41      If a given animation time offset is duplicated, the last ke
 >yframe in the <code>@keyframes</code> rule for that percentage is
 > used for that frame. There's no cascading within a <code>@keyfra
 >mes</code> rule if multiple keyframes specify the same percentage
 > values.
42    </p>
43    <div class="note">
44      <strong>Note:</strong> The description above covers Gecko 6
 >.0; in Gecko 5.0, properties that were not included in all keyfra
 >mes were not animated at all.
45    </div>
n35      Duplicate resolutionn47      When properties are left out of some keyframes
t38      If multiple keyframe sets exist for a given name, the last t50      Any properties that you don't specify in every keyframe are
>one encountered is used. <code>@keyframes</code> rules don't casc> interpolated (with the exception of those that can't be interpol
>ade, so animations never drive keyframes from more than one rule >ated, which are instead dropped from the animation entirely). For
>set.> example:
39    </p>
40    <p>51    </p>
41      If a given animation time offset is duplicated, the last ke52    <pre class="brush: css">
>yframe in the <code>@keyframes</code> rule for that percentage is 
> used for that frame. There's no cascading within a <code>@keyfra 
>mes</code> rule if multiple keyframes specify the same percentage 
> values. 
53@keyframes {
54  0% { top: 0px; left: 0px }
55  30% { top: 50px }
56  70% { left: 50px }
57  100% { top: 100px; left: 100% }
58}
59</pre>
60    <p>
61      Here, the {{ cssxref("top") }}&nbsp;property animates using
 > the 0%, 30%, and 100% keyframes, and {{ cssxref("left") }} anima
 >tes using the 0%, 70%, and 100% keyframes.
62    </p>
63    <p>
64      Only properties that are specified in both the 0% and 100% 
 >keyframes will be animated; any property not included in both of 
 >those keyframes will retain their starting value for the duration
 > of the animation sequence.

Back to History