[css3-animations] scope of keyframes and OM issues

• From: Daniel Glazman <daniel.glazman@disruptive-innovations.com>
• Date: Thu, 24 Nov 2011 09:29:47 +0100
• To: www-style <www-style@w3.org>
• CC: Anne van Kesteren <annevk@opera.com>
• Message-ID: <4ECE007B.6010506@disruptive-innovations.com>

(cc:ing AVK for the OM part)

It seems that nothing is told in CSS 3 Animations about the scope
of a @keyframes rule. Limited to a stylesheet or to the whole
document?

1. is the paragraph below animated ?

     <style>
       @keyframes anim1 { from { opacity: 0; }
                          to   { opacity: 1; } }
     </style>
     </style>
       #foo { animation: anim1 2s; }
     </style>
     ...
     <p id="foo">Is this paragraph animated?</p>

2. suppose file foo.css contains

     @keyframes anim1 { from { opacity: 0; }
                        to   { opacity: 1; } }

    is the paragraph below animated ?

     </style>
       @import url(foo.css);
       #foo { animation: anim1 2s; }
     </style>
     ...
     <p id="foo">Is this paragraph animated?</p>

3. can @keyframes be contained inside another at-rule, for instance
    @media? WebKit accepts it, Gecko does not.

AFAICT, both WebKit and Gecko animate the paragraphs, making animations
document-wide. I'm fine with that BUT

a. there should be some prose about it in the spec and unless I missed
    it, there isn't.

b. the nested @-rule case has to be discussed and resolved.

c. I would like to have a new API *for instance* on the document
    giving access to the applicable @keyframes (if two keyframes have
    same name, only last one applies, right?).

    Something like

      partial interface Document {
        readonly attribute CSSRuleList keyframesRuleList;
      }

    Without that, discovering all animations in a document is tricky
    and expensive.

</Daniel>

Received on Thursday, 24 November 2011 08:30:22 UTC