Skip to content

Commit eed3b6e

Browse files
author
Sylvain Galineau
committed
[css-animations][bikeshed] Fix event dfn type; add section 6 (DOM Interfaces) and 7 (Acknowledgements)
1 parent 4130bc2 commit eed3b6e

1 file changed

Lines changed: 164 additions & 3 deletions

File tree

‎css-animations/Overview.bs‎

Lines changed: 164 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Former Editor: Chris Marrin, Apple Inc.
1717
1818
Abstract: This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.
1919
20-
Link Defaults: css-values-3 (type) <time>
20+
Link Defaults: css-values-3 (type) <time>, cssom-1 (interface) cssstyledeclaration
2121
Ignored Terms: domstring, float, animationeventinit, eventinit, eventtarget, document
2222
</pre>
2323

@@ -634,7 +634,7 @@ Attributes</h4>
634634
<dt><dfn>animationName</dfn>, of type <a interface>DOMString</a>, readonly
635635
<dd>
636636
The value of the 'animation-name' property of the animation that fired the event.
637-
<dt><dfn>elapsedTime</dfn>, of type <a interface>float</a>, readonly
637+
<dt><dfn>elapsedTime</dfn>, of type float, readonly
638638
<dd>
639639
The amount of time the animation has been running, in seconds, when this event fired,
640640
excluding any time the animation was paused. For an ''animationstart'' event, the
@@ -655,7 +655,7 @@ Types of <code>AnimationEvent</code></h3>
655655

656656
The different types of animation events that can occur are:
657657

658-
<dl dfn-type=enum>
658+
<dl dfn-type=event dfn-for=animationevent>
659659
<dt><dfn>animationstart</dfn>
660660
<dd>
661661
The ''animationstart'' event occurs at the start of the animation. If there is an
@@ -690,3 +690,164 @@ Types of <code>AnimationEvent</code></h3>
690690
</ul>
691691
</dl>
692692

693+
<h2 id="interface-dom">
694+
DOM Interfaces</h2>
695+
696+
CSS animations are exposed to the CSSOM through a pair of new interfaces describing the keyframes.
697+
698+
<h3 id="interface-cssrule">
699+
The <code>CSSRule</code> Interface</h3>
700+
701+
The following two rule types are added to the <code>CSSRule</code> interface. They provide
702+
identification for the new keyframe and keyframes rules.
703+
704+
<h4 id="interface-cssrule-idl">
705+
IDL Definition</h4>
706+
707+
<pre class="idl">
708+
interface CSSRule {
709+
const unsigned short KEYFRAMES_RULE = 7;
710+
const unsigned short KEYFRAME_RULE = 8;
711+
};
712+
</pre>
713+
714+
<h3 id="interface-csskeyframerule">
715+
The <code>CSSKeyframeRule</code> Interface</h3>
716+
717+
The <code>CSSKeyframeRule</code> interface represents the style rule for a single key.
718+
719+
<h4 id="interface-csskeyframerule-idl">
720+
IDL Definition</h4>
721+
722+
<pre class="idl">
723+
interface CSSKeyframeRule : CSSRule {
724+
attribute DOMString keyText;
725+
readonly attribute CSSStyleDeclaration style;
726+
};
727+
</pre>
728+
729+
<h4 id="interface-csskeyframerule-attributes">
730+
Attributes</h4>
731+
732+
<dl dfn-type=attribute dfn-for=csskeyframerule>
733+
734+
<dt><dfn>keyText</dfn>, of type <a interface>DOMString</a>
735+
<dd>
736+
This attribute represents the keyframe selector as a comma-separated list of
737+
percentage values. The ''from'' and ''to'' keywords map to 0% and 100%,
738+
respectively.
739+
740+
<dt><dfn>style</dfn>, of type <a interface>CSSStyleDeclaration</a>
741+
<dd>
742+
This attribute represents the style associated with this keyframe.
743+
</dl>
744+
745+
<h3 id="interface-csskeyframesrule">
746+
The <code>CSSKeyframesRule</code> Interface</h3>
747+
748+
The <code>CSSKeyframesRule</code> interface represents a complete set of keyframes for
749+
a single animation.
750+
751+
<h4 id="interface-csskeyframesrule-idl">
752+
IDL Definition</h4>
753+
754+
<pre class="idl">
755+
interface CSSKeyframesRule : CSSRule {
756+
attribute DOMString name;
757+
readonly attribute CSSRuleList cssRules;
758+
759+
void appendRule(in DOMString rule);
760+
void deleteRule(in DOMString key);
761+
CSSKeyframeRule findRule(in DOMString key);
762+
};
763+
</pre>
764+
765+
<h4 id="interface-csskeyframesrule-attributes">
766+
Attributes</h4>
767+
768+
<dl dfn-type=attribute dfn-for=csskeyframesrule>
769+
770+
<dt><dfn>name</dfn>, of type <a interface>DOMString</a>
771+
<dd>
772+
This attribute is the name of the keyframes, used by the 'animation-name' property.
773+
774+
<dt><dfn>cssRules</dfn>, of type <a interface>CSSRuleList</a>
775+
<dd>
776+
This attribute gives access to the keyframes in the list.
777+
</dl>
778+
779+
<h4 id="interface-csskeyframesrule-appendrule">
780+
The <code>appendRule</code> method</h4>
781+
782+
The <dfn method for="CSSKeyFramesRule">appendRule()</dfn> method appends the passed
783+
<dfn interface>CSSKeyframeRule</dfn> into the list at the passed key.
784+
785+
Parameters:
786+
787+
<dl>
788+
789+
<dt><dfn argument for="CSSKeyFramesRule/appendRule()">rule</dfn> of type <a interface>DOMString</a>
790+
<dd>
791+
The rule to be appended, expressed in the same syntax as one entry in the
792+
''@keyframes'' rule.
793+
</dl>
794+
795+
No Return Value
796+
797+
No Exceptions
798+
799+
<h4 id="interface-csskeyframesrule-deleterule">
800+
The <code>deleteRule</code> method</h4>
801+
802+
The <dfn method for="CSSKeyFramesRule">deleteRule()</dfn> deletes the <code>CSSKeyframeRule</code>
803+
with the passed key. If a rule with this key does not exist, the method does nothing.
804+
805+
Parameters:
806+
807+
<dl>
808+
809+
<dt><dfn argument for="CSSKeyFramesRule/deleteRule()">key</dfn> of type <a interface>DOMString</a>
810+
<dd>
811+
The key which describes the rule to be deleted. The key must resolve to
812+
a number between 0 and 1, or the rule is ignored.
813+
</dl>
814+
815+
No Return Value
816+
817+
No Exceptions
818+
819+
820+
<h4 id="interface-csskeyframesrule-findrule">
821+
The <code>findRule</code> method</h4>
822+
823+
The <dfn method for="CSSKeyFramesRule">findRule()</dfn> returns the rule with a key matching
824+
the passed key. If no such rule exists, a null value is returned.
825+
826+
Parameters:
827+
828+
<dl>
829+
<dt><dfn argument for="CSSKeyFramesRule/findRule()">key</dfn> of type <a interface>DOMString</a>
830+
<dd>
831+
The key which described the rule to find. The key must resolve to
832+
a number between 0 and 1, or the rule is ignored.
833+
</dl>
834+
835+
Return Value:
836+
837+
<dl dfn-type="dfn" dfn-for="CSSKeyFramesRule/findRule()"">
838+
839+
<dt><code>CSSKeyframeRule</code>
840+
<dd>
841+
The found rule.
842+
</dl>
843+
844+
No Exceptions
845+
846+
847+
848+
849+
<h2 id="acknowledgements">
850+
Acknowledgements</h2>
851+
852+
Thanks especially to the feedback from Tab Atkins, Carine Bournez, Anne van Kesteren, Øyvind Stenhaug,
853+
Estelle Weyl, and all the rest of the www-style community.

0 commit comments

Comments
 (0)