Ich verstehe also, wie man CSS3-Übergänge und -Animationen ausführt. Was ist nicht klar, und ich habe gegoogelt, ist, wann man welche verwendet.

Wenn ich zum Beispiel einen Ball hüpfen lassen möchte, ist klar, dass Animation der richtige Weg ist. Ich könnte Keyframes zur Verfügung stellen und der Browser würde die Zwischenbilder machen und ich werde eine nette Animation haben.

Es gibt jedoch Fälle, in denen dieser Effekt auf beide Arten erzielt werden kann. Ein einfaches und weit verbreitetes Beispiel wäre die Implementierung des Facebook-Style-Sliding-Drawer-Menüs:

Dieser Effekt kann durch Übergänge wie folgt erzielt werden:

.sf-page {
    -webkit-transition: -webkit-transform .2s ease-out;
}

.sf-page.out {
    -webkit-transform: translateX(240px);
}

http://jsfiddle.net/NwEGz/

Oder durch Animationen wie folgt:

.sf-page {
    -webkit-animation-duration: .4s;
    -webkit-transition-timing-function: ease-out;
}

.sf-page.in {
    -webkit-animation-name: sf-slidein;
    -webkit-transform: translate3d(0, 0, 0);
}

.sf-page.out {
    -webkit-animation-name: sf-slideout;
    -webkit-transform: translateX(240px);
}

@-webkit-keyframes sf-slideout {
    from { -webkit-transform: translate3d(0, 0, 0); }
    to { -webkit-transform: translate3d(240px, 0, 0); }
}

@-webkit-keyframes sf-slidein {
    from { -webkit-transform: translate3d(240px, 0, 0); }
    to { -webkit-transform: translate3d(0, 0, 0); }
}

http://jsfiddle.net/4Z5Mr/

Mit HTML sieht das so aus:

<div class="sf-container">
    <div class="sf-page in" id="content-container">
        <button type="button">Click Me</button>
    </div>
    <div class="sf-drawer">
    </div>
</div>

Und dieses begleitende jQuery-Skript:

$("#content-container").click(function(){
    $("#content-container").toggleClass("out");
    // below is only required for css animation route
    $("#content-container").toggleClass("in");
});

Was ich verstehen möchte, ist das Für und Wider dieser Ansätze.

Ein offensichtlicher Unterschied ist, dass Animationen viel mehr Code benötigen.Animation bietet mehr Flexibilität. Ich kann verschiedene Animationen zum Hin- und Herrutschen habenGibt es etwas, das über die Leistung gesagt werden kann? Nutzen beide die h / w-Beschleunigung?Welches ist moderner und der Weg in die ZukunftKönnten Sie noch etwas hinzufügen?