Beispiel

Nehmen wir ein einfaches Beispiel: Sie wollen Objekt1 im Browser von links nach rechts bewegen. Der herkömmliche Lösungsansatz wäre, einen JavaScript-Timer zu setzen und dann alle n Millisekunden die CSS-Eigenschaft left neu zuzuweisen:

var elem = document.getElementById('Objekt1'),

left = 0;

function move() {

left += 2;

elem.style.left = left + 'px';

return left < 650; }

elem.addEventListener('click', function loop() {

move() && setTimeout(loop, 1000 / 60); }, false);

Eine sanfte Animation ist aber nicht gewährleistet - der Browser weiß ja auch gar nicht, dass es eine solche sein soll. Anders bei HTML5 und CSS3: Sie definieren einfach die finale Position des Objekts und sagen dem Browser, er soll eine Animation zu dieser Position in der vorgegebenen Zeit durchführen. Wie er das macht, bleibt ihm überlassen.

#transanim {

-moz-transition: all 2s ease-out;

-o-transition: all 2s ease-out;

-webkit-transition: all 2s ease-out;

transition: all 2s ease-out; }

var elem = document.getElementById('Objekt1');

elem.addEventListener('click', function loop() {

elem.style.left = '650px'; }, false);

Wichtig ist immer nur: Lassen Sie den Browser einfach erkennen, für welche Bereiche Ihrer Webapplikation sich der Einsatz der Hardwarebeschleunigung lohnt.