Rozumiem więc, jak wykonywać przejścia i animacje CSS3. To, co nie jest jasne, a które znalazłem w Google, to kiedy używać.

Na przykład, jeśli chcę odbić piłkę, jasne jest, że jest to animacja. Mogę dostarczyć klatki kluczowe, a przeglądarka zrobi klatki pośrednie i będę miał dobrą animację.

Istnieją jednak przypadki, w których efekt ten można osiągnąć w dowolny sposób. Prostym i powszechnym przykładem byłoby wdrożenie menu przesuwnej szuflady na Facebooku:

Efekt ten można osiągnąć dzięki takim przejściom:

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

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

http://jsfiddle.net/NwEGz/

Lub poprzez takie animacje:

.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/

Z HTML wygląda tak:

<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>

I ten towarzyszący skrypt jQuery:

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

Chciałbym zrozumieć, jakie są zalety i wady tych podejść.

Jedyną oczywistą różnicą jest to, że animacja wymaga o wiele więcej kodu.Animacja zapewnia większą elastyczność. Mogę mieć inną animację do wysuwania i wsuwaniaCzy jest coś, co można powiedzieć o wydajności. Czy oba korzystają z przyspieszenia h / w?Co jest bardziej nowoczesne i na przyszłośćCzy możesz jeszcze coś dodać?