Sunday, February 27, 2011

CSS3 sprite animation, issues in Safari

Together with CSS3 standard we get awesome tool for creating hardware accelerated css-only animated sprites. For now it is implemented only in webkit based browsers like Safari, Chrome or most of the mobile browsers. Paul Bakaus described it on his blog months ago, with additional approaches and performance optimization methods. Also Marek Pawlowski said a lot about this on his DevMeeting gamedev workshop. Working on my new mobile game, I've tested everything I could find all over web. And some of the examples (like that Paul's created with Doug Neiner) did not works on Safari and some mobiles (like Samsung's Dolfin on my bada Wave). I spend couple of annoying hours to figure out what happens, analyzing different use cases, different examples and documentation pages. But solution was simple as hell:
Safari and some of mobile browsers cannot animate any element with CSS3 animation if there is no '0%' and '100%' step.
That's why example from Paul's blog didn't want to work when I test them:
@-webkit-keyframes 'animationName' {
  0% { background-position: 0px 0px; }
  12.5% { background-position: -128px 0px; }
  25% { background-position: -256px 0px; }
  37.5% { background-position: -384px 0px; }  
  50% { background-position: -512px 0px; }
  62.5% { background-position: -640px 0px; }
  75% { background-position: -768px 0px; }
  87.5% { background-position: -896px 0px; }
}
Adding the last frame, with the same parameters as the first one, fixes the problem:
@-webkit-keyframes 'animationName' {
  0% { background-position: 0px 0px; }
  12.5% { background-position: -128px 0px; }
  25% { background-position: -256px 0px; }
  37.5% { background-position: -384px 0px; }  
  50% { background-position: -512px 0px; }
  62.5% { background-position: -640px 0px; }
  75% { background-position: -768px 0px; }
  87.5% { background-position: -896px 0px; }
  100% { background-position: 0px 0px; }
}
Of course I didn't want to show that Paul and other guys was wrong - for sure all of them has bigger experience and knowledge than me. And their solutions will eventually work when browsers will implement the standards (what was the point I supposed) - but I was looking for something what will work here and now.

10 comments:

  1. did you start learning this yourself or went to school? all that css and html and stuff

    ReplyDelete
    Replies
    1. It is not so hard as it looks..

      Delete
    2. Everybody should start learning by themselves. It's not so hard indeed..

      Delete
  2. I've learn everything on my own, I'm not sure if there are schools teaching those technologies for now.

    ReplyDelete
    Replies
    1. Sorry for the late reply, but actually there are such schools available. However, I think it's best to learn by yourself.

      Delete
    2. Thats right!
      This is how the things should be done..

      Delete
  3. Replies
    1. Use google, mate. Simply type "tutorials for animations" and you will find loads of information.

      Delete
  4. I have understand every little thing by myself, I not really know in case you'll find educational institutions educating individuals systems for the time being.

    ReplyDelete