We Keep Coding

Jerky animations - Jquery / CSS3

I am trying to combine jQuery and CSS3 to give smooth animations, but I am still finding the animations can be jerky, even on desktop.
I am using the below to move my id from off the side of the page onto the page.
$(id).addClass('active').css({ left: pageWidth })
.animate({left: 0}, 500, function(e){deferred.resolve()})
.css("-webkit-transform", "translate3d(0px,0px,0px)")
.css("-moz-transform", "translate3d(0px,0px,0px)")
.css("-ms-transform", "translate3d(0px,0px,0px)")
.css("-o-transform", "translate3d(0px,0px,0px)")
.css("transform", "translate3d(0px,0px,0px)");
Can anyone give any advice if there is anything further I can do?

Use a plugin/extension like velocity to automatically use CSS animation for you behind the scenes.
We recently used it to avoid stuttering of animations on mobile devices and it improved things a lot.

If you want smoother animations and you can use CSS3 with no restrictions then you can make use of CSS3 Keyframes.
Take a look at this CSS3 animation collection called Animate.css:
http://daneden.github.io/animate.css/
This makes use of CSS3 Keyframes that runs really smooth. You can edit the animations or create new ones depending on what you want to acomplish. With Keyframes you can set the state of the animation at any frame of it so you can make it look as smooth as you want depending on how you build it.
Take a look at this article about Keyframes and if you don't want to use the ones on Animate.css try to modify them or build your own:
http://css-tricks.com/snippets/css/keyframe-animation-syntax/
For the animmation you want to get the code is not that hard. You can do this with jQuery animate as well but Keyframes will runs smoother if you work better on the frames.

Is there a way I can force chrome to do subpixel rendering for a slow translation?

Im doing a very slow transition of a background image (a view of space that slides slowly to the left). My problem is while it looks beautiful on Firefox, it looks horrible on Chrome. I get a "jittery" effect due to Chrome's lack of subpixel rendering, and the image just snaps to the next pixel. I cannot speed the image up because it will destroy the effect Im trying to achieve. I have tried using TranslateZ() tricks, I have tried every CSS3 effect I could think of to make it look better, Ive tried Kinetic.js, Ive even tried Babylon.js hoping that WebGL would fix my problem.
At this point Im at a loss and I might just have to give Chrome users a static background and cater more to the Firefox users in regards to the neat little things I can do for the UI UX, and then just put a disclaimer on my site saying that the page is best viewed in FF.
I REALLY dont want to do this. Is there ANY work around at all?

You can force subpixel rendering by applying a small transformation:
#container {
transform: rotate(-0.0000000001deg);
-webkit-transform: rotate(-0.0000000001deg);
}
But instead of using JS to make the animation work, why not use CSS3 animations?
If you use transform: translate() browsers will use subpixel-rendering by default.
Also since the performance is better you shouldn't get your jittery/wave motion.
More info on performance here: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
I've put together a simple demo here: http://jsfiddle.net/yrwA9/6/
(For the sake of simplicity I only used the -webkit- vendor prefixes)

Is it possible that jQuery transition does not work on a heavy webpage?

I am trying to use this solution for transition on my webpages:
http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/
In fact it does not work well and like broken and changes slowly. I tried it with an empty webpage and it worked better. I know my webpage is really heavy, so should I not use this transition thing? Or this specific solution isn't good enough.

for heavy animations, it's time to go for GSAP, could be 20X faster and can be used as a jquery plugin, no need to change your jquery code using animate:
http://www.greensock.com/jquery-gsap-plugin/

It depends on the performance of the PC.
Are you using CSS shadows, like box-shadow or text-shadow on your elements?
Are you using "live" or "on" for your elements' events?

How to animate DOM elements with JavaScript/CSS

I'm working on a chess game with some strategic visual overlays. One of them requires some light animation of pieces and squares, specifically, a slow and steady pulsing. My board is a with each being a single square. Pieces are shown by setting the background-image in CSS to an .svg of the piece it contains.
Can this be done in CSS? I'm using the latest browsers with no support for legacies, so I can use all the nifty CSS3 stuff. Another option I was thinking was to set the background-image of the board to an animated .gif of the piece pulsing. Would this work?
Are there any other ways to do this I haven't mentioned? I would like to avoid packages/frameworks, but I am using jQuery.
CLARIFICATION:
I want to make the chess piece kind of pulse (flash?) in place slowly for emphasis. I want it to be a slow, subtle, and consistent pulse that persists until another event turns it off.

It sounds like you're looking for CSS animations.
Take a look here: http://www.w3.org/TR/css3-animations
In particular you'll need the following timing functions:
animation-name, to specify the set of keyframes to use.
animation-duration, to specify the speed of the animation.
animation-iteration-count, to repeat the animation.
animation-direction, to alternate the direction of the animation.
And you'll need to create some keyframes, which let you specify what CSS properties are modified by the animation.
Also, you'll need vendor prefixes on everything, so you need to write -webkit-animation-name rather than animation-name (for example), and repeat everything for -moz and other vendors.
Here's an example for webkit that creates a pulsating opacity effect. You can experiment with the properties in the from and to sections to animate size, color, etc.
.chess-piece {
-webkit-animation-duration: 1s;
-webkit-animation-name: pulse;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
#-webkit-keyframes pulse {
from {
opacity: 0.5;
}
to {
opacity: 1;
}
}
JSFiddle example for webkit and moz

That is quite possible and easy to do. As I understand it, you want to make some kind of glowing animation of the active chess figure?
Here's how I would go implementing a solution: Create 2 pngs, one with the chess figure in its unflashy ordinary state and one with its fully illuminated state. Then use jQuery to change the opacity of the illuminated state from 0 to 100 and back to 0 again.You can send the jQuery "on animation finish" signals to achieve this. You can than just use some kind of simplified observer pattern to cancel the effect once an event occurs.

jQuery equivalent of Flash animation

I would like to imitate the animation happening when switching from one page to another using the menu on the left of this example webpage. This is one of several projects that I am working on to prove JavaScript and associated libraries are capable of producing animations equivalent to Flash.
I can get a simple hide animation going with this but it doesn't quite look the same as the Flash version. It's almost like they've used some easing effect for the slide out and in. I can't seem to figure out the CSS with which to animate it in JavaScript. Any ideas on the CSS I should be looking at or know of any plugins that have already accomplished this style?
http://www.wix.com/flash-templates/artistic-choice
http://www.alphadesigns.com.au/stackoverflow/index.html (updated with opacity option)

Try animating opacity. Note that this doesn't work in IE<9, you'll have to use a filter and a custom animation if IE6-8 must be supported (see http://www.quirksmode.org/css/opacity.html).