mozilla

Compare Revisions

animation-fill-mode

Change Revisions

Revision 493413:

Revision 493413 by kscarfone on

Revision 520469:

Revision 520469 by codepo8 on

Title:
animation-fill-mode
animation-fill-mode
Slug:
Web/CSS/animation-fill-mode
Web/CSS/animation-fill-mode
Tags:
"NeedsMobileBrowserCompatibility", "CSS", "Experimental", "CSS Animations", "CSS Property", "Web", "Layout", "Reference"
"NeedsMobileBrowserCompatibility", "CSS", "Reference", "Experimental", "Référence", "CSS Animations", "Web", "CSS Property", "Layout"
Content:

Revision 493413
Revision 520469
tt189    <h2 name="Example">
190      Example
191    </h2>
192    <p>
193      You can see the effect of animation-fill-mode in the follow
 >ing example.&nbsp; For animations that run for an infinite time, 
 >you might want them to end on the last state rather than the firs
 >t.
194    </p>
195    <h3>
196      HTML Content
197    </h3>
198    <pre class="brush: html">
199&lt;p&gt;Move your mouse over the grey box&lt;/p&gt;
200&lt;div class="demo"&gt;
201  &lt;div class="grows"&gt;This just grows&lt;/div&gt;
202  &lt;div class="growsandstays"&gt;This grows and stays big&lt;/d
 >iv&gt;
203&lt;/div&gt;
204</pre>
205    <h3>
206      CSS Content
207    </h3>
208    <pre class="brush: css">
209.demo {
210  border-top: 100px solid #ccc;
211  height: 300px;
212}
213@keyframes grow {
214    0% { font-size: 0 }
215    100% { font-size: 40px }
216}
217.demo .grows {
218    animation-name: grow;
219    animation-duration: 3s;
220}
221.demo .growsandstays {
222    animation-name: grow;
223    animation-duration: 3s;
224    animation-fill-mode: forwards;
225}
226</pre>
227    <p>
228      {{ EmbedLiveSample('Example') }}
229    </p>

Back to History