You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1669 lines
54 KiB
1669 lines
54 KiB
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
|
|
|
<html lang=en>
|
|
<head>
|
|
<title>CSS Animations Module Level 3</title>
|
|
<link href=default.css rel=stylesheet type="text/css">
|
|
|
|
<style type="text/css">
|
|
.rhs { white-space: pre-wrap; }
|
|
code { font-size: inherit; }
|
|
#box-shadow-samples td { background: white; color: black; }
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
}
|
|
td {
|
|
padding: 0.2em 1em;
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
<link href="http://www.w3.org/StyleSheets/TR/W3C-WD.css" rel=stylesheet
|
|
type="text/css">
|
|
|
|
<body>
|
|
<div class=head> <!--begin-logo-->
|
|
<p><a href="http://www.w3.org/"><img alt=W3C height=48
|
|
src="http://www.w3.org/Icons/w3c_home" width=72></a> <!--end-logo-->
|
|
|
|
<h1>CSS Animations Module Level 3</h1>
|
|
|
|
<h2 class="no-num no-toc" id=longstatus-date>W3C Working Draft 20 March
|
|
2009</h2>
|
|
|
|
<dl>
|
|
<dt>This version:
|
|
|
|
<dd> <a
|
|
href="http://www.w3.org/TR/2009/WD-css3-animations-20090320">http://www.w3.org/TR/2009/WD-css3-animations-20090320</a>
|
|
|
|
|
|
<dt>Latest version:
|
|
|
|
<dd><a
|
|
href="http://www.w3.org/TR/css3-animations">http://www.w3.org/TR/css3-animations</a>
|
|
|
|
|
|
<dt>Previous version:
|
|
|
|
<dd>none
|
|
|
|
<dt id=editors-list>Editors:
|
|
|
|
<dd><a href="mailto:dino@apple.com">Dean Jackson</a> (<a
|
|
href="http://www.apple.com/">Apple Inc</a>)
|
|
|
|
<dd><a href="mailto:hyatt@apple.com">David Hyatt</a> (<a
|
|
href="http://www.apple.com/">Apple Inc</a>)
|
|
|
|
<dd><a href="mailto:cmarrin@apple.com">Chris Marrin</a> (<a
|
|
href="http://www.apple.com/">Apple Inc</a>)
|
|
</dl>
|
|
<!--begin-copyright-->
|
|
<p class=copyright><a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright"
|
|
rel=license>Copyright</a> © 2009 <a
|
|
href="http://www.w3.org/"><acronym title="World Wide Web
|
|
Consortium">W3C</acronym></a><sup>®</sup> (<a
|
|
href="http://www.csail.mit.edu/"><acronym title="Massachusetts Institute
|
|
of Technology">MIT</acronym></a>, <a
|
|
href="http://www.ercim.org/"><acronym title="European Research Consortium
|
|
for Informatics and Mathematics">ERCIM</acronym></a>, <a
|
|
href="http://www.keio.ac.jp/">Keio</a>), All Rights Reserved. W3C <a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer">liability</a>,
|
|
<a
|
|
href="http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks">trademark</a>
|
|
and <a
|
|
href="http://www.w3.org/Consortium/Legal/copyright-documents">document
|
|
use</a> rules apply.</p>
|
|
<!--end-copyright-->
|
|
<hr title="Separator for header">
|
|
</div>
|
|
|
|
<h2 class="no-num no-toc" id=abstract>Abstract</h2>
|
|
|
|
<p>CSS Animations allow an author to modify CSS property values over time.
|
|
|
|
<h2 class="no-num no-toc" id=status>Status of this document</h2>
|
|
<!--begin-status-->
|
|
|
|
<p><em>This section describes the status of this document at the time of
|
|
its publication. Other documents may supersede this document. A list of
|
|
current W3C publications and the latest revision of this technical report
|
|
can be found in the <a href="http://www.w3.org/TR/">W3C technical reports
|
|
index at http://www.w3.org/TR/.</a></em>
|
|
|
|
<p>Publication as a Working Draft does not imply endorsement by the W3C
|
|
Membership. This is a draft document and may be updated, replaced or
|
|
obsoleted by other documents at any time. It is inappropriate to cite this
|
|
document as other than work in progress.
|
|
|
|
<p>The (<a
|
|
href="http://lists.w3.org/Archives/Public/www-style/">archived</a>) public
|
|
mailing list <a href="mailto:www-style@w3.org">www-style@w3.org</a> (see
|
|
<a href="http://www.w3.org/Mail/Request">instructions</a>) is preferred
|
|
for discussion of this specification. When sending e-mail, please put the
|
|
text “css3-animations” in the subject, preferably like this:
|
|
“[<!---->css3-animations<!---->] <em>…summary of
|
|
comment…</em>”
|
|
|
|
<p>This document was produced by the <a
|
|
href="http://www.w3.org/Style/CSS/members">CSS Working Group</a> (part of
|
|
the <a href="http://www.w3.org/Style/">Style Activity</a>).
|
|
|
|
<p>This document was produced by a group operating under the <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/">5 February
|
|
2004 W3C Patent Policy</a>. W3C maintains a <a
|
|
href="http://www.w3.org/2004/01/pp-impl/32061/status"
|
|
rel=disclosure>public list of any patent disclosures</a> made in
|
|
connection with the deliverables of the group; that page also includes
|
|
instructions for disclosing a patent. An individual who has actual
|
|
knowledge of a patent which the individual believes contains <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#def-essential">Essential
|
|
Claim(s)</a> must disclose the information in accordance with <a
|
|
href="http://www.w3.org/Consortium/Patent-Policy-20040205/#sec-Disclosure">section
|
|
6 of the W3C Patent Policy</a>.</p>
|
|
<!--end-status-->
|
|
|
|
<p>This is the first public Working Draft of the
|
|
“css3-animations” series.
|
|
|
|
<h2 class="no-num no-toc" id=contents>Table of contents</h2>
|
|
<!--begin-toc-->
|
|
|
|
<ul class=toc>
|
|
<li><a href="#introduction"><span class=secno>1 </span>Introduction</a>
|
|
|
|
<li><a href="#keyframes-"><span class=secno>2 </span> Keyframes </a>
|
|
<ul class=toc>
|
|
<li><a href="#timing-functions-for-keyframes-"><span class=secno>2.1
|
|
</span> Timing functions for keyframes </a>
|
|
</ul>
|
|
|
|
<li><a href="#animations-"><span class=secno>3 </span> Animations </a>
|
|
<ul class=toc>
|
|
<li><a href="#animation-behavior-"><span class=secno>3.1 </span>
|
|
Animation behavior </a>
|
|
|
|
<li><a href="#the-animation-name-property-"><span class=secno>3.2
|
|
</span> The <span class=prop-name>‘<code
|
|
class=property>animation-name</code>’</span> Property </a>
|
|
|
|
<li><a href="#the-animation-duration-property-"><span class=secno>3.3
|
|
</span> The <span class=prop-name>‘<code
|
|
class=property>animation-duration</code>’</span> Property </a>
|
|
|
|
<li><a href="#animation-timing-function_tag"><span class=secno>3.4
|
|
</span> The <span class=prop-name>‘<code
|
|
class=property>animation-timing-function</code>’</span> Property
|
|
</a>
|
|
|
|
<li><a href="#the-animation-iteration-count-property-"><span
|
|
class=secno>3.5 </span> The <span class=prop-name>‘<code
|
|
class=property>animation-iteration-count</code>’</span> Property
|
|
</a>
|
|
|
|
<li><a href="#the-animation-direction-property-"><span class=secno>3.6
|
|
</span> The <span class=prop-name>‘<code
|
|
class=property>animation-direction</code>’</span> Property </a>
|
|
|
|
<li><a href="#the-animation-play-state-property-"><span class=secno>3.7
|
|
</span> The <span class=prop-name>‘<code
|
|
class=property>animation-play-state</code>’</span> Property </a>
|
|
|
|
<li><a href="#the-animation-delay-property-"><span class=secno>3.8
|
|
</span> The <span class=prop-name>‘<code
|
|
class=property>animation-delay</code>’</span> Property </a>
|
|
|
|
<li><a href="#the-animation-shorthand-property-"><span class=secno>3.9
|
|
</span> The <span class=prop-name>‘<code
|
|
class=property>animation</code>’</span> Shorthand Property </a>
|
|
</ul>
|
|
|
|
<li><a href="#animation-events-"><span class=secno>4 </span> Animation
|
|
Events </a>
|
|
|
|
<li><a href="#dom-interfaces-"><span class=secno>5 </span> DOM Interfaces
|
|
</a>
|
|
|
|
<li><a href="#references"><span class=secno>6 </span>References</a>
|
|
<ul class=toc>
|
|
<li class=no-num><a href="#normative-references">Normative
|
|
references</a>
|
|
|
|
<li class=no-num><a href="#other-references">Other references</a>
|
|
</ul>
|
|
|
|
<li class=no-num><a href="#property-index">Property index</a>
|
|
|
|
<li class=no-num><a href="#index">Index</a>
|
|
</ul>
|
|
<!--end-toc-->
|
|
|
|
<h2 id=introduction><span class=secno>1 </span>Introduction</h2>
|
|
|
|
<p><em>This section is not normative.</em>
|
|
|
|
<p> This document introduces new CSS features to enable animation.
|
|
|
|
<p> Animation is currently possible in languages like SVG, but no system
|
|
exists for the native animation of CSS styles. This proposal introduces
|
|
<em>defined animations</em>, which specify the values that CSS properties
|
|
will take over a given time interval.
|
|
|
|
<p> This specification is an extension to CSS Transitions <a
|
|
href="#CSS3-TRANSITIONS"
|
|
rel=biblioentry>[CSS3-TRANSITIONS]<!--{{!CSS3-TRANSITIONS}}--></a>.
|
|
|
|
<h2 id=keyframes-><span class=secno>2 </span> Keyframes</h2>
|
|
|
|
<p> In a simple transition, since both the starting value and ending value
|
|
are known, a single timing function and duration determine the
|
|
intermediate values of the animating property. If finer control of the
|
|
intermediate values is required, keyframes can be used.
|
|
|
|
<p> Keyframes are specified using a specialized CSS at-rule. A <span
|
|
class=prop-name>@keyframes</span> rule consists of the keyword
|
|
"@keyframes", followed by an identifier giving a name for the animation
|
|
(which will be referenced using <span class=prop-name>‘<code
|
|
class=property><a
|
|
href="#animation-name">animation-name</a></code>’</span>), followed
|
|
by a set of style rules (delimited by curly braces).
|
|
|
|
<p> The <i>keyframe selector</i> for a keyframe style rule consists of a
|
|
comma-separated list of percentage values or the keywords ‘<code
|
|
class=property>from</code>’ or ‘<code
|
|
class=property>to</code>’. The selector is used to specify the
|
|
percentage along the duration of the animation that the keyframe
|
|
represents. The keyframe itself is specified by the block of property
|
|
values declared on the selector. The keyword ‘<code
|
|
class=property>from</code>’ is equivalent to the value 0. The
|
|
keyword ‘<code class=property>to</code>’ is equivalent to the
|
|
value 100%. Note that the percentage unit specifier must be used on
|
|
percentage values. Therefore, "0" is an invalid keyframe selector.
|
|
|
|
<p> Keyframes can be specified in any order. The selector determines the
|
|
placement of the keyframe in the animation.
|
|
|
|
<p> Every keyframe declaration must have a keyframe rule for 0% or 100%,
|
|
possibly defined using "from" or "to". A keyframe declaration without
|
|
these keyframe selectors is invalid and will not be available for
|
|
animation.
|
|
|
|
<p> The <i>keyframe declaration</i> for a keyframe rule consists of
|
|
properties and values. Properties that are unable to be animated are
|
|
ignored in these rules, with the exception of <a class=prop-name
|
|
href="#animation-timing-function">animation-timing-function'</a>, the
|
|
behavior of which is described below.
|
|
|
|
<p> The @keyframes rule that is used by an animation will be the last one
|
|
encountered in sorted rules order that matches the name of the animation.
|
|
<span class=prop-name>@keyframes</span> rules do not cascade; therefore an
|
|
animation will never derive keyframes from more than one <span
|
|
class=prop-name>@keyframes</span> rule.
|
|
|
|
<p> To determine the set of keyframes, all of the values in selectors are
|
|
sorted in increasing order by time. If there are any duplicates, then the
|
|
last keyframe specified inside the <span class=prop-name>@keyframes</span>
|
|
rule will be used to provide the keyframe information for that time. There
|
|
is no cascading within a <span class=prop-name>@keyframes</span> rule if
|
|
multiple keyframes specify the same keyframe selector values.
|
|
|
|
<div class=example>
|
|
<p style=display:none> Example(s):</p>
|
|
|
|
<pre>
|
|
@keyframes 'wobble' {
|
|
|
|
0% {
|
|
left: 100px;
|
|
}
|
|
|
|
40% {
|
|
left: 150px;
|
|
}
|
|
|
|
60% {
|
|
left: 75px;
|
|
}
|
|
|
|
100% {
|
|
left: 100px;
|
|
}
|
|
|
|
}
|
|
|
|
</pre>
|
|
Four keyframes are specified for the animation named "wobble". In the
|
|
first keyframe, shown at the beginning of the animation cycle, the
|
|
‘<code class=property>left</code>’ value of the animation is
|
|
100px. By 40% of the animation duration, ‘<code
|
|
class=property>left</code>’ value has animated to 150px. At 60% of
|
|
the animation duration, the ‘<code class=property>left</code>’
|
|
value has animated back to 75px. At the end of the animation cycle, the
|
|
‘<code class=property>left</code>’ value has returned to
|
|
100px. The diagram below shows the state of the animation if it were given
|
|
a duration of 10s.
|
|
<div class=figure> <img alt="" src=animation1.png></div>
|
|
|
|
<p class=caption> Animations states specified by keyframes</p>
|
|
</div>
|
|
|
|
<p> The following is the grammar for the keyframes rule.
|
|
|
|
<pre>
|
|
keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';
|
|
|
|
keyframes-blocks: [ keyframe-selectors block ]* ;
|
|
|
|
keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;
|
|
</pre>
|
|
<!-- ======================================================================================================= -->
|
|
|
|
<h3 id=timing-functions-for-keyframes-><span class=secno>2.1 </span> Timing
|
|
functions for keyframes</h3>
|
|
|
|
<p> A keyframe style rule may also declare the timing function that is to
|
|
be used as the animation moves to the next keyframe.
|
|
|
|
<div class=example>
|
|
<p style=display:none> Example(s):</p>
|
|
|
|
<pre>
|
|
@keyframes 'bounce' {
|
|
|
|
from {
|
|
top: 100px;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
25% {
|
|
top: 50px;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
50% {
|
|
top: 100px;
|
|
animation-timing-function: ease-out;
|
|
}
|
|
|
|
75% {
|
|
top: 75px;
|
|
animation-timing-function: ease-in;
|
|
}
|
|
|
|
to {
|
|
top: 100px;
|
|
}
|
|
|
|
}
|
|
|
|
</pre>
|
|
Five keyframes are specified for the animation named "bounce". Between the
|
|
first and second keyframe (ie. between 0 and 25%) an "ease-out" timing
|
|
function is used. Between the second and third keyframe (ie. between 25%
|
|
and 50%) an "ease-in" timing function is used. And so on. The effect will
|
|
appear as an element that moves up the page 50px, slowing down as it
|
|
reaches its highest point then speeding up as it falls back to 100px. The
|
|
second half of the animation behaves in a similar manner, but only moves
|
|
the element 25px units up the page.</div>
|
|
|
|
<p> See <a href="#animation-timing-function_tag">the <span
|
|
class=prop-name>‘<code
|
|
class=property>animation-timing-function</code>’</span> property</a>
|
|
for more information.</p>
|
|
<!-- ======================================================================================================= -->
|
|
|
|
<h2 id=animations-><span class=secno>3 </span> Animations</h2>
|
|
|
|
<p> Animations are similar to transitions in that they change the
|
|
presentational value of CSS properties over time. The principal difference
|
|
is that while transitions trigger <i>implicitly</i> when property values
|
|
change, animations are <i>explicitly</i> executed when the animation
|
|
properties are applied. Because of this, animations require explicit
|
|
values for the properties being animated. These values are specified using
|
|
animation keyframes, described above.
|
|
|
|
<p> Many aspects of the animation can be controlled, including how many
|
|
times the animation iterates, whether or not it alternates between the
|
|
begin and end values, and whether or not the animation should be running
|
|
or paused. An animation can also delay its start time.
|
|
|
|
<div class=example>
|
|
<p style=display:none> Example(s):</p>
|
|
|
|
<pre>
|
|
div {
|
|
animation-name: 'diagonal-slide';
|
|
animation-duration: 5s;
|
|
animation-iteration-count: 10;
|
|
}
|
|
|
|
@keyframes 'diagonal-slide' {
|
|
|
|
from {
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
to {
|
|
left: 100px;
|
|
top: 100px;
|
|
}
|
|
|
|
}
|
|
|
|
</pre>
|
|
This will produce an animation that moves an element from (0, 0) to
|
|
(100px, 100px) over five seconds and repeats itself nine times (for a
|
|
total of ten iterations).</div>
|
|
<!-- ======================================================================================================= -->
|
|
|
|
<h3 id=animation-behavior-><span class=secno>3.1 </span> Animation behavior
|
|
</h3>
|
|
|
|
<p> CSS Animations affect computed property values. During the execution of
|
|
an animation, the computed value for a property is controlled by the
|
|
animation. This overrides the value specified in the normal styling
|
|
system.
|
|
|
|
<p> In the case of multiple animations specifying behavior for the same
|
|
property, the animation defined last will override the previously defined
|
|
animations.
|
|
|
|
<p> An animation does not affect the computed value before the application
|
|
of the animation, before the animation delay has expired, and after the
|
|
end of the animation.
|
|
|
|
<div class=figure> <img alt="" src=sandwich.png></div>
|
|
|
|
<p class=caption> Computation of animated property values
|
|
|
|
<p> The diagram above shows how property values are computed. The intrinsic
|
|
style is shown at the top of the diagram. The computed value is derived
|
|
from intrinsic style at the times when an animation is not running and
|
|
also when an animation is delayed (see below for specification of
|
|
animation delay). During an animation, the computed style is derived from
|
|
the animated value.
|
|
|
|
<p> The start time of an animation is the latter of two moments: the time
|
|
at which the style is resolved that specifies the animation, or the time
|
|
the document's load event is fired. Therefore, an animation specified in
|
|
the document stylesheet will begin at the document load. An animation
|
|
specified on an element by modifying the style after the document has
|
|
loaded will start when the style is resolved. That may be immediately in
|
|
the case of a pseudo style rule such as hover, or may be when the
|
|
scripting engine returns control to the browser (in the case of style
|
|
applied by script).
|
|
|
|
<p> An animation applies to an element if the element has a value for <span
|
|
class=prop-name>‘<code class=property><a
|
|
href="#animation-name">animation-name</a></code>’</span> that
|
|
references a valid keyframes rule. Once an animation has started it
|
|
continues until it ends or the <span class=prop-name>‘<code
|
|
class=property><a
|
|
href="#animation-name">animation-name</a></code>’</span> is removed.
|
|
The values used for the keyframes and animation properties are snapshotted
|
|
at the time the animation starts. Changing them during the execution of
|
|
the animation has no effect. Note also, that changing the value of <span
|
|
class=prop-name>‘<code class=property><a
|
|
href="#animation-name">animation-name</a></code>’</span> does not
|
|
necessarily restart an animation (e.g. if a list of animations are applied
|
|
and one is removed from the list, only that animation will stop; The other
|
|
animations will continue). In order to restart an animation, it must be
|
|
removed then reapplied.</p>
|
|
<!-- ======================================================================================================= -->
|
|
|
|
<h3 id=the-animation-name-property-><span class=secno>3.2 </span> The <span
|
|
class=prop-name>‘<code class=property><a
|
|
href="#animation-name">animation-name</a></code>’</span> Property</h3>
|
|
|
|
<p> The <span class=prop-name>‘<code class=property><a
|
|
href="#animation-name">animation-name</a></code>’</span> property
|
|
defines a list of animations that apply. Each name is used to select the
|
|
keyframe at-rule that provides the property values for the animation. If
|
|
the name does not match any keyframe at-rule, there are no properties to
|
|
be animated and the animation will not execute. Furthermore, if the
|
|
animation name is ‘<code class=property>none</code>’ then
|
|
there will be no animation. This can be used to override any animations
|
|
coming from the cascade.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td> <em>Name:</em>
|
|
|
|
<td> <dfn id=animation-name>animation-name</dfn>
|
|
|
|
<tr>
|
|
<td> <em>Value:</em>
|
|
|
|
<td> none | IDENT [, none | IDENT ]*
|
|
|
|
<tr>
|
|
<td> <em>Initial:</em>
|
|
|
|
<td> none
|
|
|
|
<tr>
|
|
<td> <em>Applies to:</em>
|
|
|
|
<td> block-level and inline-level elements
|
|
|
|
<tr>
|
|
<td> <em>Inherited:</em>
|
|
|
|
<td> no
|
|
|
|
<tr>
|
|
<td> <em>Percentages:</em>
|
|
|
|
<td> N/A
|
|
|
|
<tr>
|
|
<td> <em>Media:</em>
|
|
|
|
<td> visual
|
|
|
|
<tr>
|
|
<td> <em>Computed value:</em>
|
|
|
|
<td> Same as specified value.
|
|
</table>
|
|
<!--
|
|
<p>
|
|
It is possible for elements to have multiple animations running that change the same property or properties. In this case the animations combine in a manner defined by the property. For example, animations on <span class="prop-name">opacity</span> will add together and animations on <span class="prop-name">transform</span> will have their transformation matrices multiplied.
|
|
</p>
|
|
<div class="example">
|
|
<p style="display:none">
|
|
Example(s):
|
|
</p>
|
|
<pre>
|
|
@keyframes 'border-bloat' {
|
|
from {
|
|
border-width: 0;
|
|
}
|
|
to {
|
|
border-width: 10px;
|
|
}
|
|
}
|
|
|
|
@keyframes 'border-diet' {
|
|
from {
|
|
border-width: 4px;
|
|
}
|
|
to {
|
|
border-width: 2px;
|
|
}
|
|
}
|
|
|
|
div {
|
|
animation-name: 'border-bloat', 'border-diet';
|
|
animation-duration: 10s, 4s;
|
|
}
|
|
</pre>
|
|
<p>
|
|
The above example has two animations executing on the same property, <span class="prop-name">border-width</span>. The animations are additive. That is, the
|
|
resulting value for the property will be the addition of the values from the
|
|
two animations.
|
|
</p>
|
|
<p>
|
|
At time ‘<code class=css>0s</code>’ the element's border will be 4px wide (0px from ‘<code class=property>border-bloat</code>’ plus 4px from ‘<code class=property>border-diet</code>’).
|
|
At time ‘<code class=css>4s</code>’ the element's border will be 6px wide (4px from ‘<code class=property>border-bloat</code>’ plus 2px from ‘<code class=property>border-diet</code>’).
|
|
At time ‘<code class=css>10s</code>’ the element's border will be 10px wide (10px from ‘<code class=property>border-bloat</code>’ and no addition from
|
|
‘<code class=property>border-diet</code>’ as it is no longer executing).
|
|
</p>
|
|
</div>
|
|
-->
|
|
<!-- ======================================================================================================= -->
|
|
|
|
<h3 id=the-animation-duration-property-><span class=secno>3.3 </span> The
|
|
<span class=prop-name>‘<code class=property><a
|
|
href="#animation-duration">animation-duration</a></code>’</span>
|
|
Property</h3>
|
|
|
|
<p> The <span class=prop-name>‘<code class=property><a
|
|
href="#animation-duration">animation-duration</a></code>’</span>
|
|
property defines the length of time that an animation takes to complete
|
|
one cycle.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td> <em>Name:</em>
|
|
|
|
<td> <dfn id=animation-duration>animation-duration</dfn>
|
|
|
|
<tr>
|
|
<td> <em>Value:</em>
|
|
|
|
<td> <time> [, <time>]*
|
|
|
|
<tr>
|
|
<td> <em>Initial:</em>
|
|
|
|
<td> 0
|
|
|
|
<tr>
|
|
<td> <em>Applies to:</em>
|
|
|
|
<td> block-level and inline-level elements
|
|
|
|
<tr>
|
|
<td> <em>Inherited:</em>
|
|
|
|
<td> no
|
|
|
|
<tr>
|
|
<td> <em>Percentages:</em>
|
|
|
|
<td> N/A
|
|
|
|
<tr>
|
|
<td> <em>Media:</em>
|
|
|
|
<td> visual
|
|
|
|
<tr>
|
|
<td> <em>Computed value:</em>
|
|
|
|
<td> Same as specified value.
|
|
</table>
|
|
|
|
<p> By default the value is ‘<code class=css>0</code>’, meaning
|
|
that the animation cycle is immediate (i.e. there will be no animation). A
|
|
negative value for <a class=prop-name
|
|
href="#animation-duration">animation-duration</a> is treated as
|
|
‘<code class=css>0</code>’.</p>
|
|
<!-- ======================================================================================================= -->
|
|
|
|
<h3 id=animation-timing-function_tag><span class=secno>3.4 </span> The
|
|
<span class=prop-name>‘<code class=property><a
|
|
href="#animation-timing-function">animation-timing-function</a></code>’</span>
|
|
Property</h3>
|
|
|
|
<p> The <span class=prop-name>‘<code class=property><a
|
|
href="#animation-timing-function">animation-timing-function</a></code>’</span>
|
|
property describes how the animation will progress over one cycle of its
|
|
duration. See the <span class=prop-name>‘<code
|
|
class=property>transition-timing-function</code>’</span> property <a
|
|
href="#CSS3-TRANSITIONS"
|
|
rel=biblioentry>[CSS3-TRANSITIONS]<!--{{!CSS3-TRANSITIONS}}--></a> for a
|
|
complete description of timing function calculation.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td> <em>Name:</em>
|
|
|
|
<td> <dfn id=animation-timing-function>animation-timing-function</dfn>
|
|
|
|
<tr>
|
|
<td> <em>Value:</em>
|
|
|
|
<td> ease | linear | ease-in | ease-out | ease-in-out |
|
|
cubic-bezier(<number>, <number>, <number>,
|
|
<number>) [, ease | linear | ease-in | ease-out | ease-in-out |
|
|
cubic-bezier(<number>, <number>, <number>,
|
|
<number>)]*
|
|
|
|
<tr>
|
|
<td> <em>Initial:</em>
|
|
|
|
<td> ease
|
|
|
|
<tr>
|
|
<td> <em>Applies to:</em>
|
|
|
|
<td> block-level and inline-level elements
|
|
|
|
<tr>
|
|
<td> <em>Inherited:</em>
|
|
|
|
<td> no
|
|
|
|
<tr>
|
|
<td> <em>Percentages:</em>
|
|
|
|
<td> N/A
|
|
|
|
<tr>
|
|
<td> <em>Media:</em>
|
|
|
|
<td> visual
|
|
|
|
<tr>
|
|
<td> <em>Computed value:</em>
|
|
|
|
<td> Same as specified value.
|
|
</table>
|
|
|
|
<p> For a keyframed animation, the <span class=prop-name>‘<code
|
|
class=property><a
|
|
href="#animation-timing-function">animation-timing-function</a></code>’</span>
|
|
applies between keyframes, not over the entire animation. For example, in
|
|
the case of an ease-in-out timing function, an animation will ease in at
|
|
the start of the keyframe and ease out at the end of the keyframe. A <span
|
|
class=prop-name>‘<code class=property><a
|
|
href="#animation-timing-function">animation-timing-function</a></code>’</span>
|
|
defined within a keyframe block applies to that keyframe, otherwise the
|
|
timing function specified for the animation is used.</p>
|
|
<!-- ======================================================================================================= -->
|
|
|
|
<h3 id=the-animation-iteration-count-property-><span class=secno>3.5
|
|
</span> The <span class=prop-name>‘<code class=property><a
|
|
href="#animation-iteration-count">animation-iteration-count</a></code>’</span>
|
|
Property</h3>
|
|
|
|
<p> The <span class=prop-name>‘<code class=property><a
|
|
href="#animation-iteration-count">animation-iteration-count</a></code>’</span>
|
|
property defines the number of times an animation cycle is played. The
|
|
default value is one, meaning the animation will play from beginning to
|
|
end once. A value of <span class=prop-value>‘<code
|
|
class=property>infinite</code>’</span> will cause the animation to
|
|
repeat forever. Non-integer numbers will cause the animation to end
|
|
part-way through a cycle. Negative values for <span
|
|
class=prop-name>‘<code class=property><a
|
|
href="#animation-iteration-count">animation-iteration-count</a></code>’</span>
|
|
are treated as zero. This property is often used with an <span
|
|
class=prop-name>‘<code class=property><a
|
|
href="#animation-direction">animation-direction</a></code>’</span>
|
|
value of <span class=prop-value>‘<code
|
|
class=property>alternate</code>’</span>, which will cause the
|
|
animation to play in reverse on alternate cycles.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td> <em>Name:</em>
|
|
|
|
<td> <dfn id=animation-iteration-count>animation-iteration-count</dfn>
|
|
|
|
<tr>
|
|
<td> <em>Value:</em>
|
|
|
|
<td> infinite | <number> [, infinite | <number>]*
|
|
|
|
<tr>
|
|
<td> <em>Initial:</em>
|
|
|
|
<td> 1
|
|
|
|
<tr>
|
|
<td> <em>Applies to:</em>
|
|
|
|
<td> block-level and inline-level elements
|
|
|
|
<tr>
|
|
<td> <em>Inherited:</em>
|
|
|
|
<td> no
|
|
|
|
<tr>
|
|
<td> <em>Percentages:</em>
|
|
|
|
<td> N/A
|
|
|
|
<tr>
|
|
<td> <em>Media:</em>
|
|
|
|
<td> visual
|
|
|
|
<tr>
|
|
<td> <em>Computed value:</em>
|
|
|
|
<td> Same as specified value.
|
|
</table>
|
|
<!-- ======================================================================================================= -->
|
|
|
|
<h3 id=the-animation-direction-property-><span class=secno>3.6 </span> The
|
|
<span class=prop-name>‘<code class=property><a
|
|
href="#animation-direction">animation-direction</a></code>’</span>
|
|
Property</h3>
|
|
|
|
<p> The <span class=prop-name>‘<code class=property><a
|
|
href="#animation-direction">animation-direction</a></code>’</span>
|
|
property defines whether or not the animation should play in reverse on
|
|
alternate cycles. If <span class=prop-value>‘<code
|
|
class=property>alternate</code>’</span> is specified, the animation
|
|
cycle iterations that are odd counts are played in the normal direction,
|
|
and the animation cycle iterations that are even counts are played in a
|
|
reverse direction. When an animation is played in reverse the timing
|
|
functions are also reversed. For example, when played in reverse an
|
|
ease-in animation would appear to be an ease-out animation.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td> <em>Name:</em>
|
|
|
|
<td> <dfn id=animation-direction>animation-direction</dfn>
|
|
|
|
<tr>
|
|
<td> <em>Value:</em>
|
|
|
|
<td> normal | alternate [, normal | alternate]*
|
|
|
|
<tr>
|
|
<td> <em>Initial:</em>
|
|
|
|
<td> normal
|
|
|
|
<tr>
|
|
<td> <em>Applies to:</em>
|
|
|
|
<td> block-level and inline-level elements
|
|
|
|
<tr>
|
|
<td> <em>Inherited:</em>
|
|
|
|
<td> no
|
|
|
|
<tr>
|
|
<td> <em>Percentages:</em>
|
|
|
|
<td> N/A
|
|
|
|
<tr>
|
|
<td> <em>Media:</em>
|
|
|
|
<td> visual
|
|
|
|
<tr>
|
|
<td> <em>Computed value:</em>
|
|
|
|
<td> Same as specified value.
|
|
</table>
|
|
<!-- ======================================================================================================= -->
|
|
|
|
<h3 id=the-animation-play-state-property-><span class=secno>3.7 </span> The
|
|
<span class=prop-name>‘<code class=property><a
|
|
href="#animation-play-state">animation-play-state</a></code>’</span>
|
|
Property</h3>
|
|
|
|
<div class=issue> We are considering removing ‘<code
|
|
class=property><a
|
|
href="#animation-play-state">animation-play-state</a></code>’ since
|
|
its behaviour can be replicated using other techniques. For example, by
|
|
querying the computed style, removing the animation and then setting
|
|
style.</div>
|
|
|
|
<p> The <span class=prop-name>‘<code class=property><a
|
|
href="#animation-play-state">animation-play-state</a></code>’</span>
|
|
property defines whether the animation is running or paused. A running
|
|
animation can be paused by setting this property to <span
|
|
class=prop-value>‘<code class=property>paused</code>’</span>.
|
|
To continue running a paused animation this property can be set to <span
|
|
class=prop-value>‘<code class=property>running</code>’</span>.
|
|
A paused animation will continue to display the current value of the
|
|
animation in a static state, as if the time of the animation is constant.
|
|
When a paused animation is resumed, it restarts from the current value,
|
|
not necessarily from the beginning of the animation.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td> <em>Name:</em>
|
|
|
|
<td> <dfn id=animation-play-state>animation-play-state</dfn>
|
|
|
|
<tr>
|
|
<td> <em>Value:</em>
|
|
|
|
<td> running | paused [, running | paused]*
|
|
|
|
<tr>
|
|
<td> <em>Initial:</em>
|
|
|
|
<td> running
|
|
|
|
<tr>
|
|
<td> <em>Applies to:</em>
|
|
|
|
<td> block-level and inline-level elements
|
|
|
|
<tr>
|
|
<td> <em>Inherited:</em>
|
|
|
|
<td> no
|
|
|
|
<tr>
|
|
<td> <em>Percentages:</em>
|
|
|
|
<td> N/A
|
|
|
|
<tr>
|
|
<td> <em>Media:</em>
|
|
|
|
<td> visual
|
|
|
|
<tr>
|
|
<td> <em>Computed value:</em>
|
|
|
|
<td> Same as specified value.
|
|
</table>
|
|
<!-- ======================================================================================================= -->
|
|
|
|
<h3 id=the-animation-delay-property-><span class=secno>3.8 </span> The
|
|
<span class=prop-name>‘<code class=property><a
|
|
href="#animation-trigger">animation-delay</a></code>’</span>
|
|
Property</h3>
|
|
|
|
<p> The <span class=prop-name>‘<code class=property><a
|
|
href="#animation-trigger">animation-delay</a></code>’</span>
|
|
property defines when the animation will start. It allows an animation to
|
|
begin execution some time after it is applied. An <span
|
|
class=prop-name>‘<code class=property><a
|
|
href="#animation-trigger">animation-delay</a></code>’</span> value
|
|
of ‘<code class=css>0</code>’ means the animation will execute
|
|
as soon as it is applied. Otherwise, the value specifies an offset from
|
|
the moment the animation is applied, and the animation will delay
|
|
execution by that offset.
|
|
|
|
<p> If the value for <span class=prop-name>‘<code class=property><a
|
|
href="#animation-trigger">animation-delay</a></code>’</span> is a
|
|
negative time offset then the animation will execute the moment it is
|
|
applied, but will appear to have begun execution at the specified offset.
|
|
That is, the animation will appear to begin part-way through its play
|
|
cycle. In the case where an animation has implied starting values and a
|
|
negative <span class=prop-name>‘<code class=property><a
|
|
href="#animation-trigger">animation-delay</a></code>’</span>, the
|
|
starting values are taken from the moment the animation is applied.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td> <em>Name:</em>
|
|
|
|
<td> <dfn id=animation-trigger>animation-delay</dfn>
|
|
|
|
<tr>
|
|
<td> <em>Value:</em>
|
|
|
|
<td> <time> [, <time>]*
|
|
|
|
<tr>
|
|
<td> <em>Initial:</em>
|
|
|
|
<td> 0
|
|
|
|
<tr>
|
|
<td> <em>Applies to:</em>
|
|
|
|
<td> block-level and inline-level elements
|
|
|
|
<tr>
|
|
<td> <em>Inherited:</em>
|
|
|
|
<td> no
|
|
|
|
<tr>
|
|
<td> <em>Percentages:</em>
|
|
|
|
<td> N/A
|
|
|
|
<tr>
|
|
<td> <em>Media:</em>
|
|
|
|
<td> visual
|
|
|
|
<tr>
|
|
<td> <em>Computed value:</em>
|
|
|
|
<td> Same as specified value.
|
|
</table>
|
|
<!-- ======================================================================================================= -->
|
|
|
|
<h3 id=the-animation-shorthand-property-><span class=secno>3.9 </span> The
|
|
<span class=prop-name>‘<code class=property><a
|
|
href="#animation">animation</a></code>’</span> Shorthand Property</h3>
|
|
|
|
<p> The <span class=prop-name>‘<code class=property><a
|
|
href="#animation">animation</a></code>’</span> shorthand property
|
|
combines six of the animation properties into a single property.
|
|
|
|
<table class=propdef>
|
|
<tbody>
|
|
<tr>
|
|
<td> <em>Name:</em>
|
|
|
|
<td> <dfn id=animation>animation</dfn>
|
|
|
|
<tr>
|
|
<td> <em>Value:</em>
|
|
|
|
<td> [<animation-name> || <animation-duration> ||
|
|
<animation-timing-function> || <animation-delay> ||
|
|
<animation-iteration-count> || <animation-direction>] [,
|
|
[<animation-name> || <animation-duration> ||
|
|
<animation-timing-function> || <animation-delay> ||
|
|
<animation-iteration-count> || <animation-direction>] ]*
|
|
|
|
<tr>
|
|
<td> <em>Initial:</em>
|
|
|
|
<td> see individual properties
|
|
|
|
<tr>
|
|
<td> <em>Applies to:</em>
|
|
|
|
<td> block-level and inline-level elements
|
|
|
|
<tr>
|
|
<td> <em>Inherited:</em>
|
|
|
|
<td> no
|
|
|
|
<tr>
|
|
<td> <em>Percentages:</em>
|
|
|
|
<td> N/A
|
|
|
|
<tr>
|
|
<td> <em>Media:</em>
|
|
|
|
<td> visual
|
|
|
|
<tr>
|
|
<td> <em>Computed value:</em>
|
|
|
|
<td> Same as specified value.
|
|
</table>
|
|
<!-- ======================================================================================================= -->
|
|
|
|
<h2 id=animation-events-><span class=secno>4 </span> Animation Events</h2>
|
|
|
|
<p> Several animation related events are available through the <a
|
|
href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM Event
|
|
system</a>. The start and end of an animation, and the end of each
|
|
iteration of an animation all generate DOM events. An element can have
|
|
multiple properties being animated simultaneously. This can occur either
|
|
with a single <a class=prop-name href="#animation-name">animation-name</a>
|
|
value with keyframes containing multiple properties, or with multiple <a
|
|
class=prop-name href="#animation-name">animation-name</a> values. For the
|
|
purposes of events, each <a class=prop-name
|
|
href="#animation-name">animation-name</a> specifies a single animation.
|
|
Therefore an event will be generated for each <a class=prop-name
|
|
href="#animation-name">animation-name</a> value and not necessarily for
|
|
each property being animated.
|
|
|
|
<p> The time the animation has been running is sent with each event
|
|
generated. This allows the event handler to determine the current
|
|
iteration of a looping animation or the current position of an alternating
|
|
animation. This time does not include any time the animation was in the
|
|
<code>paused</code> play state.
|
|
|
|
<dl>
|
|
<dt> <b>Interface <i><a id=Events-AnimationEvent
|
|
name=Events-AnimationEvent>AnimationEvent</a></i></b>
|
|
|
|
<dd>
|
|
<p> The <code>AnimationEvent</code> interface provides specific
|
|
contextual information associated with Animation events.</p>
|
|
|
|
<dl>
|
|
<dt> <br>
|
|
<b>IDL Definition</b>
|
|
|
|
<dd>
|
|
<div class=idl-code>
|
|
<pre>
|
|
interface AnimationEvent : Event {
|
|
readonly attribute DOMString animationName;
|
|
readonly attribute float elapsedTime;
|
|
void initAnimationEvent(in DOMString typeArg,
|
|
in boolean canBubbleArg,
|
|
in boolean cancelableArg,
|
|
in DOMString animationNameArg,
|
|
in float elapsedTimeArg);
|
|
};
|
|
</pre>
|
|
</div>
|
|
|
|
<dt> <b>Attributes</b>
|
|
|
|
<dd>
|
|
<dl>
|
|
<dt> <code class=attribute-name><a
|
|
id=Events-AnimationEvent-animationName
|
|
name=Events-AnimationEvent-animationName>animationName</a></code> of
|
|
type <code>DOMString</code>, readonly
|
|
|
|
<dd> The value of the <a class=prop-name
|
|
href="#animation-name">animation-name</a> property of the animation
|
|
that fired the event.
|
|
</dl>
|
|
|
|
<dl>
|
|
<dt> <code class=attribute-name><a
|
|
id=Events-AnimationEvent-elapsedTime
|
|
name=Events-AnimationEvent-elapsedTime>elapsedTime</a></code> of type
|
|
<code>float</code>, readonly
|
|
|
|
<dd> The amount of time the animation has been running, in seconds,
|
|
when this event fired, excluding any time the animation was paused.
|
|
Note that this value is not affected by the value of <a
|
|
class=prop-name href="#animation-trigger">animation-delay</a>. For an
|
|
"animationstart" event, the elapsedTime is always zero.
|
|
</dl>
|
|
|
|
<dt> <b>Methods</b>
|
|
|
|
<dd>
|
|
<dl>
|
|
<dt> <code class=method-name><a
|
|
id=Events-AnimationEvent-initAnimationEvent
|
|
name=Events-AnimtionEvent-initAnimationEvent>initAnimationEvent</a></code>
|
|
|
|
|
|
<dd>
|
|
<div class=method> The <code>initAnimationEvent</code> method is used
|
|
to initialize the value of an <code>AnimationEvent</code> created
|
|
through the <a
|
|
href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-DocumentEvent"><code>DocumentEvent</code></a>
|
|
interface. This method may only be called before the
|
|
<code>AnimationEvent</code> has been dispatched via the
|
|
<code>dispatchEvent</code> method, though it may be called multiple
|
|
times during that phase if necessary. If called multiple times, the
|
|
final invocation takes precedence.
|
|
<div class=parameters> <b>Parameters</b>
|
|
<div class=paramtable>
|
|
<dl>
|
|
<dt> <code class=parameter-name>typeArg</code> of type
|
|
<code>DOMString</code>
|
|
|
|
<dd> Specifies the event type.<br>
|
|
|
|
<dt> <code class=parameter-name>canBubbleArg</code> of type
|
|
<code>boolean</code>
|
|
|
|
<dd> Specifies whether or not the event can bubble.<br>
|
|
|
|
<dt> <code class=parameter-name>cancelableArg</code> of type
|
|
<code>boolean</code>
|
|
|
|
<dd> Specifies whether or not the event's default action can be
|
|
prevented.
|
|
|
|
<dt> <code class=parameter-name>animationNameArg</code> of type
|
|
<code>DOMString</code>
|
|
|
|
<dd> Specifies the <a
|
|
href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event"><code>Event</code></a>'s
|
|
animation name.<br>
|
|
|
|
<dt> <code class=parameter-name>elapsedTimeArg</code> of type
|
|
<code>float</code>
|
|
|
|
<dd> Specifies the amount of time, in seconds, the animation has
|
|
been running at the time of initialization.
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<!-- parameters -->
|
|
<div> <b>No Return Value</b></div>
|
|
|
|
<div> <b>No Exceptions</b></div>
|
|
</div>
|
|
<!-- method -->
|
|
</dl>
|
|
</dl>
|
|
</dl>
|
|
|
|
<p> The different types of Animation events that can occur are:
|
|
|
|
<dl>
|
|
<dt> <b>animationstart</b>
|
|
|
|
<dd> The ‘<code class=property>animationstart</code>’ event
|
|
occurs at the start of the animation
|
|
<ul>
|
|
<li>Bubbles: Yes
|
|
|
|
<li>Cancelable: Yes
|
|
|
|
<li>Context Info: animationName
|
|
</ul>
|
|
|
|
<dt> <b>animationend</b>
|
|
|
|
<dd> The ‘<code class=property>animationend</code>’ event
|
|
occurs when the animation finishes.
|
|
<ul>
|
|
<li>Bubbles: Yes
|
|
|
|
<li>Cancelable: Yes
|
|
|
|
<li>Context Info: animationName, elapsedTime
|
|
</ul>
|
|
|
|
<dt> <b>animationiteration</b>
|
|
|
|
<dd> The ‘<code class=property>animationiteration</code>’
|
|
event occurs at the end of each iteration of an animation for which
|
|
<code><a
|
|
href="#animation-iteration-count">animation-iteration-count</a></code> is
|
|
greater than one. This event does not occur for animations with an
|
|
iteration count of one.
|
|
<ul>
|
|
<li>Bubbles: Yes
|
|
|
|
<li>Cancelable: Yes
|
|
|
|
<li>Context Info: animationName, elapsedTime
|
|
</ul>
|
|
</dl>
|
|
<!-- ======================================================================================================= -->
|
|
|
|
<h2 id=dom-interfaces-><span class=secno>5 </span> DOM Interfaces</h2>
|
|
|
|
<p> CSS animation is exposed to the CSSOM through a pair of new interfaces
|
|
describing the keyframes.
|
|
|
|
<dl>
|
|
<dt> <b>Interface <i><a id=DOM-CSSRule
|
|
name=DOM-CSSRule>CSSRule</a></i></b>
|
|
|
|
<dd>
|
|
<p> The following 2 rule types are added to the <code>CSSRule</code>
|
|
interface. They provide identification for the new keyframe and
|
|
keyframes rules.</p>
|
|
|
|
<dl>
|
|
<dt> <b>IDL Definition</b>
|
|
|
|
<dd>
|
|
<div class=idl-code>
|
|
<pre>
|
|
interface CSSRule {
|
|
...
|
|
const unsigned short KEYFRAMES_RULE = 7;
|
|
const unsigned short KEYFRAME_RULE = 8;
|
|
...
|
|
};</pre>
|
|
</div>
|
|
</dd>
|
|
<!-- IDL -->
|
|
</dl>
|
|
|
|
<dt> <b>Interface <i><a id=DOM-CSSKeyframeRule
|
|
name=DOM-CSSKeyframeRule>CSSKeyframeRule</a></i></b>
|
|
|
|
<dd>
|
|
<p> The <code>CSSKeyframeRule</code> interface represents the style rule
|
|
for a single key.</p>
|
|
|
|
<dl>
|
|
<dt> <br>
|
|
<b>IDL Definition</b>
|
|
|
|
<dd>
|
|
<div class=idl-code>
|
|
<pre>
|
|
interface CSSKeyframeRule : CSSRule {
|
|
attribute DOMString keyText;
|
|
readonly attribute CSSStyleDeclaration style;
|
|
};
|
|
</pre>
|
|
</div>
|
|
<br>
|
|
|
|
<dt> <b>Attributes</b>
|
|
|
|
<dd>
|
|
<dl>
|
|
<dt> <code class=attribute-name><a id=DOM-CSSKeyframeRule-keyText
|
|
name=DOM-CSSKeyframeRule-keyText>keyText</a></code> of type
|
|
<code>DOMString</code>
|
|
|
|
<dd> This attribute represents the key as the string representation of
|
|
a floating point number between 0 and 1. If the value in the CSS
|
|
style is <code>from</code> this value will be 0, and if the value in
|
|
the CSS style is <code>to</code> this value will be 1.<br>
|
|
</dl>
|
|
|
|
<dd>
|
|
<dl>
|
|
<dt> <code class=attribute-name><a id=DOM-CSSKeyframeRule-style
|
|
name=DOM-CSSKeyframeRule-style>style</a></code> of type
|
|
<code>CSSStyleDeclaration</code>
|
|
|
|
<dd> This attribute represents the style associated with this
|
|
keyframe.<br>
|
|
</dl>
|
|
|
|
<dt> <b>No Methods</b>
|
|
</dl>
|
|
</dl>
|
|
|
|
<dl>
|
|
<dt> <b>Interface <i><a id=DOM-CSSKeyframesRule
|
|
name=DOM-CSSKeyframesRule>CSSKeyframesRule</a></i></b>
|
|
|
|
<dd>
|
|
<p> The <code>CSSKeyframesRule</code> interface represents a complete set
|
|
of keyframes for a single animation.</p>
|
|
|
|
<dl>
|
|
<dt> <br>
|
|
<b>IDL Definition</b>
|
|
|
|
<dd>
|
|
<div class=idl-code>
|
|
<pre>
|
|
interface CSSKeyframesRule : CSSRule {
|
|
attribute DOMString name;
|
|
readonly attribute CSSRuleList cssRules;
|
|
|
|
void insertRule(in DOMString rule);
|
|
void deleteRule(in DOMString key);
|
|
CSSKeyframeRule findRule(in DOMString key);
|
|
};
|
|
</pre>
|
|
</div>
|
|
<br>
|
|
|
|
<dt> <b>Attributes</b>
|
|
|
|
<dd>
|
|
<dl>
|
|
<dt> <code class=attribute-name><a id=DOM-CSSKeyframesRule-name
|
|
name=DOM-CSSKeyframesRule-name>name</a></code> of type
|
|
<code>DOMString</code>
|
|
|
|
<dd> This attribute is the name of the keyframes, used by the <code><a
|
|
href="#animation-name">animation-name</a></code> property.<br>
|
|
</dl>
|
|
|
|
<dd>
|
|
<dl>
|
|
<dt> <code class=attribute-name><a id=DOM-CSSKeyframeRules-cssRules
|
|
name=DOM-CSSKeyframeRules-cssRules>cssRules</a></code> of type
|
|
<code>CSSRuleList</code>
|
|
|
|
<dd> This attribute gives access to the keyframes in the list.<br>
|
|
</dl>
|
|
|
|
<dt> <b>Methods</b>
|
|
|
|
<dd>
|
|
<dl><!-- ======================================================================================================= -->
|
|
|
|
<dt> <code class=method-name><a id=DOM-CSSKeyframesRule-insertRule
|
|
name=DOM-CSSKeyframesRule-insertRule>insertRule</a></code>
|
|
|
|
<dd>
|
|
<div class=method> The <code>insertRule</code> method inserts the
|
|
passed CSSKeyframeRule into the list at the passed key.
|
|
<div class=parameters> <b>Parameters</b>
|
|
<div class=paramtable>
|
|
<dl>
|
|
<dt> <code class=parameter-name>rule</code> of type
|
|
<code>DOMString</code>
|
|
|
|
<dd> The rule to be inserted, expressed in the same syntax as one
|
|
entry in the <code>@keyframes</code> rule. The key is included
|
|
in the rule string, which described the point at which the rule
|
|
should be inserted. If a rule with the same key already exists
|
|
in the list, it is replaced with this rule.
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<!-- parameters -->
|
|
<div class=return-value> <b>No Return Value</b></div>
|
|
|
|
<div> <b>No Exceptions</b></div>
|
|
</div>
|
|
<!-- ======================================================================================================= -->
|
|
|
|
|
|
<dt> <code class=method-name><a id=DOM-CSSKeyframesRule-deleteRule
|
|
name=DOM-CSSKeyframesRule-deleteRule>deleteRule</a></code>
|
|
|
|
<dd>
|
|
<div class=method> The <code>deleteRule</code> method deletes the
|
|
CSSKeyframeRule with the passed key. If a rule with this key does
|
|
not exist, the method does nothing.
|
|
<div class=parameters> <b>Parameters</b>
|
|
<div class=paramtable>
|
|
<dl>
|
|
<dt> <code class=parameter-name>key</code> of type
|
|
<code>DOMString</code>
|
|
|
|
<dd> The key which describes the rule to be deleted. The key must
|
|
resolve to a number between 0 and 1, or the rule is ignored.<br>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<!-- parameters -->
|
|
<div class=return-value> <b>No Return Value</b></div>
|
|
|
|
<div> <b>No Exceptions</b></div>
|
|
</div>
|
|
<!-- ======================================================================================================= -->
|
|
|
|
|
|
<dt> <code class=method-name><a id=DOM-CSSKeyframesRule-findRule
|
|
name=DOM-CSSKeyframesRule-findRule>findRule</a></code>
|
|
|
|
<dd>
|
|
<div class=method> The <code>findRule</code> method returns the rule
|
|
with a key matching the passed key. If no such rule exists, a null
|
|
value is returned.
|
|
<div class=parameters> <b>Parameters</b>
|
|
<div class=paramtable>
|
|
<dl>
|
|
<dt> <code class=parameter-name>key</code> of type
|
|
<code>DOMString</code>
|
|
|
|
<dd> The key which described the rule to find. The key must
|
|
resolve to a number between 0 and 1, or the rule is ignored.<br>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<!-- parameters -->
|
|
<div class=return-value> <b>Return Value</b>
|
|
<div class=returnvalue>
|
|
<dl>
|
|
<dt> <code>CSSKeyframeRule</code>
|
|
|
|
<dd> The found rule.<br>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
|
|
<div> <b>No Exceptions</b></div>
|
|
</div>
|
|
<!-- ======================================================================================================= -->
|
|
|
|
</dl>
|
|
<!-- method -->
|
|
</dl>
|
|
</dl>
|
|
|
|
<h2 id=references><span class=secno>6 </span>References</h2>
|
|
|
|
<h3 class=no-num id=normative-references>Normative references</h3>
|
|
<!--begin-normative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
|
|
<dt id=CSS3-TRANSITIONS>[CSS3-TRANSITIONS]
|
|
|
|
<dd>Dean Jackson; David Hyatt; Chris Marrin. <a
|
|
href="http://www.w3.org/TR/2009/WD-css3-transitions-20090320"><cite>CSS
|
|
Transitions Module Level 3.</cite></a> 20 March 2009. W3C Working Draft.
|
|
(Work in progress.) URL: <a
|
|
href="http://www.w3.org/TR/2009/WD-css3-transitions-20090320">http://www.w3.org/TR/2009/WD-css3-transitions-20090320</a>
|
|
</dd>
|
|
<!---->
|
|
</dl>
|
|
<!--end-normative-->
|
|
|
|
<h3 class=no-num id=other-references>Other references</h3>
|
|
<!--begin-informative-->
|
|
<!-- Sorted by label -->
|
|
|
|
<dl class=bibliography>
|
|
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
|
|
<!---->
|
|
</dl>
|
|
<!--end-informative-->
|
|
|
|
<h2 class=no-num id=property-index>Property index</h2>
|
|
<!--begin-properties-->
|
|
|
|
<table class=proptable>
|
|
<thead>
|
|
<tr>
|
|
<th>Property
|
|
|
|
<th>Values
|
|
|
|
<th>Initial
|
|
|
|
<th>Applies to
|
|
|
|
<th>Inh.
|
|
|
|
<th>Percentages
|
|
|
|
<th>Media
|
|
|
|
<tbody>
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#animation">animation</a>
|
|
|
|
<td>[<animation-name> || <animation-duration> ||
|
|
<animation-timing-function> || <animation-delay> ||
|
|
<animation-iteration-count> || <animation-direction>] [,
|
|
[<animation-name> || <animation-duration> ||
|
|
<animation-timing-function> || <animation-delay> ||
|
|
<animation-iteration-count> || <animation-direction>] ]*
|
|
|
|
<td>see individual properties
|
|
|
|
<td>block-level and inline-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#animation-trigger">animation-delay</a>
|
|
|
|
<td><time> [, <time>]*
|
|
|
|
<td>0
|
|
|
|
<td>block-level and inline-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property
|
|
href="#animation-direction">animation-direction</a>
|
|
|
|
<td>normal | alternate [, normal | alternate]*
|
|
|
|
<td>normal
|
|
|
|
<td>block-level and inline-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#animation-duration">animation-duration</a>
|
|
|
|
<td><time> [, <time>]*
|
|
|
|
<td>0
|
|
|
|
<td>block-level and inline-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property
|
|
href="#animation-iteration-count">animation-iteration-count</a>
|
|
|
|
<td>infinite | <number> [, infinite | <number>]*
|
|
|
|
<td>1
|
|
|
|
<td>block-level and inline-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property href="#animation-name">animation-name</a>
|
|
|
|
<td>none | IDENT [, none | IDENT ]*
|
|
|
|
<td>none
|
|
|
|
<td>block-level and inline-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property
|
|
href="#animation-play-state">animation-play-state</a>
|
|
|
|
<td>running | paused [, running | paused]*
|
|
|
|
<td>running
|
|
|
|
<td>block-level and inline-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
|
|
<tr valign=baseline>
|
|
<td><a class=property
|
|
href="#animation-timing-function">animation-timing-function</a>
|
|
|
|
<td>ease | linear | ease-in | ease-out | ease-in-out |
|
|
cubic-bezier(<number>, <number>, <number>,
|
|
<number>) [, ease | linear | ease-in | ease-out | ease-in-out |
|
|
cubic-bezier(<number>, <number>, <number>,
|
|
<number>)]*
|
|
|
|
<td>ease
|
|
|
|
<td>block-level and inline-level elements
|
|
|
|
<td>no
|
|
|
|
<td>N/A
|
|
|
|
<td>visual
|
|
</table>
|
|
<!--end-properties-->
|
|
|
|
<h2 class=no-num id=index>Index</h2>
|
|
<!--begin-index-->
|
|
|
|
<ul class=indexlist>
|
|
<li>animation, <a href="#animation"
|
|
title=animation><strong>3.9</strong></a>
|
|
|
|
<li>animation-delay, <a href="#animation-trigger"
|
|
title=animation-delay><strong>3.8</strong></a>
|
|
|
|
<li>animation-direction, <a href="#animation-direction"
|
|
title=animation-direction><strong>3.6</strong></a>
|
|
|
|
<li>animation-duration, <a href="#animation-duration"
|
|
title=animation-duration><strong>3.3</strong></a>
|
|
|
|
<li>animation-iteration-count, <a href="#animation-iteration-count"
|
|
title=animation-iteration-count><strong>3.5</strong></a>
|
|
|
|
<li>animation-name, <a href="#animation-name"
|
|
title=animation-name><strong>3.2</strong></a>
|
|
|
|
<li>animation-play-state, <a href="#animation-play-state"
|
|
title=animation-play-state><strong>3.7</strong></a>
|
|
|
|
<li>animation-timing-function, <a href="#animation-timing-function"
|
|
title=animation-timing-function><strong>3.4</strong></a>
|
|
</ul>
|
|
<!--end-index-->
|
|
</html>
|
|
<!-- Keep this comment at the end of the file
|
|
Local variables:
|
|
mode: sgml
|
|
sgml-default-doctype-name:"html"
|
|
sgml-minimize-attributes:t
|
|
End:
|
|
-->
|