CSS3 arc animations fail on Metro apps / IE10


  • 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-y"style="background-color:yellow; height:50px; width: 50px; position:absolute; left:300px; top:300px;"></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?


    Friday, February 10, 2012 10:39 PM

All replies

  • <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:


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


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


    Jeff Sanders (MSFT)

    Monday, February 13, 2012 7:41 PM
  • 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.


    Friday, February 17, 2012 6:11 AM