keyframe animations don't work with paper-progress

[elsigh]

Check out http://jsbin.com/nenidowuje/1/edit

Remove the paper-progress element and notice that the headline above it animates.
With paper-progress in the DOM things go badly.

[keanulee]

Try to move your @-webkit-keyframes definition to inside the <template> of your element definition so that the keyframes are defined for that shadow root:

<polymer-element name="my-element">
  <template>
    <style>
      h1 {
        -webkit-animation: slidein 3s;
      }

      @-webkit-keyframes slidein {
        0% {
          margin-left: 100%;
          width: 300%; 
        }

        100% {
          margin-left: 0%;
          width: 100%;
        }
      }
    </style>

    <!-- OR link to external stylesheet from here -->
    <link rel="stylesheet" href="/path/to/stylesheet.css">

    <h1>Hello from my-element</h1>
  </template>
  <script>Polymer({});</script>
</polymer-element>

<my-element></my-element>

Don't forget that you'll also need to define @keyframes (in addition to @-webkit-keyframes) if you're going to specify the unprefixed animation CSS property.

[elsigh]

In this case though I'm styling the paper-progress element, not my own element

[elsigh]

derp, didn't mean to close it sorry.

[keanulee]

I don't think/not sure if you can define keyframes outside of a shadow root to be used within a shadow root. @frankiefu ideas?