css transitions

Question

I've been building an iphone optimitized version of my site, and have been trying to get animations to work/transitions to work.

I looked at iui/ciui,etc.etc. but they seem like overkill for what I need. I'm using jquery and have most of the functionality built, except that I couldn't get .animate to work smoothly, so I'm trying css transitions.

I have a div which when an object within the div is clicked, I want the div to transition of the page left (standard iPhone UI). So as I understand, you can't apply a css transition to a parent element onclick, so I add a class with jquery and the class has the css transition in it.

This works, with the exception that the only css transition that I could get to work is

-webkit-transform: translate(-330px, 0);

and I don't see a way to add a transition time to this, so this ends up being as effective as .hide(). Any ideas? I couldn't really figure out how the other transitions worked. like

 -webkit-transition-property:  left;
  -webkit-transition-duration:  4s;

how would I specify how far left (and I'm actually going negative numbers). Also, it didn't seem that this was triggered on the add-class.

I've looked at the http://webkit.org/specs/CSSVisualEffects/CSSTransitions.html, but couldn't figure out how to do this based on that documentation.

Thanks Pete

Answer 1

could you not just use a standard css positioning and possibly jquery animations? if not maybe this helps?

Answer 2

Have a look at the Surfin' Safari blog:

• Post about CSS animations.

• Post about CSS transitions.

• Post about CSS transforms.

I'm not completely sure that the iPhone supports all those techniques, but the probability is high.