none
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

    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:

    -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)

    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.


    Sammy124

    Friday, February 17, 2012 6:11 AM