CSS keyframe animations in Shadow DOM

[Toby Schachman]

Hi,

What's the current best practice to use a CSS keyframe animation on an element within a shadow root?

That is, without Polymer, just Chrome Canary with Experimental Web Platform features on.

Also, there was some talk of new CSS selectors (^^ and ^). Any updates on these? Can they be used? Are there docs/spec? Does this relate to my above question?

Toby

[Steve Orvell]

> What's the current best practice to use a CSS keyframe animation on an element within a shadow root?

It should just work: http://jsbin.com/Icewemug/2/edit

> Also, there was some talk of new CSS selectors (^^ and ^). Any updates on these? Can they be used? Are there docs/spec? Does this relate to my above question

These are now implemented in Canary!

I think Rob's excellent summary is a good place to start:

http://robdodson.me/blog/2013/11/15/the-cat-and-the-hat-css-selectors/

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Toby Schachman]

Thanks!

I got tripped up because I was doing a transform animation and Canary unprefixes animations but keeps transforms prefixed. So the fix is just to list an exponential combination of prefixes ;)

http://jsbin.com/ItepESAk/1/

Also thanks for the link to Rob's summary. Very helpful!

Toby

[Eric Bidelman]

Steve, I recall @animation defines did _not_ work inside of <polymer-element> at one point.

http://www.polymer-project.org/docs/polymer/styling.html#making-styles-global

Did this change? Should I remove that commentary?

[Steve Orvell]

Yeah, this bug has been fixed.

It was part of addressing this issue, I believe:

 https://code.google.com/p/chromium/issues/detail?id=229345.