CSS3 arc animations fail on Metro apps / IE10

Question

I'm trying to use CSS3 animation markup to generate a nice smooth arc (rather than connect the dots).  A technique for doing this that seems to work in webkit browsers is to transform the x and y axis independently with nested divs

As described here: http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/

<divid="item-x">

<divid="item-y"style="background-color:yellow; height:50px; width: 50px; position:absolute; left:300px; top:300px;"></div>

</div>

...And then have separate keyframes for item-x and item-y.

This technique doesn't seem to work on my Win8 Metro app or IE10.  Works fine on chrome/webkit.  Any thoughts on why not, and any alternatives?

---

Sammy124

Answer 1

<iframe allowTransparency="true" frameBorder="0" id="twttrHubFrame" name="twttrHubFrame" scrolling="no" src="http://platform.twitter.com/widgets/hub.1326407570.html" style="top:-9999em;width:10px;height:10px;position:absolute;" tabIndex="0"></iframe>

Hi Sammy,

That article is specific for webkit browsers.  For example, all of the code has this:

-webkit-transform

You should modify your code to use the -ms prefix ala:

http://msdn.microsoft.com/en-us/library/windows/apps/ff974936.aspx

If that does not work you will need to post a sample of the CSS and HTML you are using.

-Jeff

---

Jeff Sanders (MSFT)

Answer 2

Yup, i had modified code to -ms prefix from everything in the example.

I talked to someone on the team and they told me this bug is fixed in the Feb 29 build.

---

Sammy124