I need to update the code examples at some point. They’re pretty old and those prefixed versions will only work in Firefox and Webkit.

In the meantime, you can take a look at the Mozilla article about cross-browser CSS3 gradient syntax. It also includes some of the history and how it has changed since I wrote the article.

Does the above code work in IE9 because when I view the page I couldn’t see the gradients for all the example?

/* -webkit-transition: left 1s linear;*/

I’ve got a div which is off the screen to the right (left: 320px) and then I’m doing this:

$(‘.mtrpSignupForm’).anim({translate3d: ‘-320px,0,0′}, 1, ‘linear’);

Below the css, any idea what’s going wrong?

.mtrpSignupForm {
left: 320px;
top: 40px;
width: 100%;
height: 100%;
position: absolute;
-webkit-transition: left 1s linear;
background-color: red;
}

Thanks
Mike

div.animate {
-webkit-transform: translate3d(0, 0, 0); //THIS LINE ADDED
position: relative;
left: 0;
-webkit-transition: left 1s linear;
}

div.newposition {
left: 500px;
}

Basically add ‘ -webkit-transform: translate3d(0, 0, 0);’ for hardware acceleration (which is the same you do through the zepto example)

Hth,
Geert-Jan

Can you set something up on http://jsfiddle.net so we can see what you have?