CSS: Animation vs. Transition

Quindi, capisco come eseguire sia transizioni che animazioni CSS3. Ciò che non è chiaro, e ho cercato su Google, è quando usare quale.

Ad esempio, se voglio far rimbalzare una palla, è chiaro che l'animazione è la strada da percorrere. Potrei fornire fotogrammi chiave e il browser farebbe i frame intermedi e avrò una bella animazione in corso.

Tuttavia, ci sono casi in cui un tale effetto può essere ottenuto in entrambi i modi. Un esempio semplice e comune sarebbe implementare il menu del cassetto scorrevole in stile Facebook:

Questo effetto può essere ottenuto attraverso transizioni come queste:

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

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

http://jsfiddle.net/NwEGz/

Oppure, attraverso animazioni come queste:

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

Con HTML che assomiglia a questo:

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

E, questo script jQuery di accompagnamento:

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

Quello che vorrei capire è quali sono i pro e i contro di questi approcci.

1. Una differenza evidente è che l'animazione sta prendendo molto più codice.
2. L'animazione offre una maggiore flessibilità. Posso avere diverse animazioni per scivolare dentro e fuori
3. C'è qualcosa che si può dire delle prestazioni. Entrambi sfruttano l'accelerazione h / w?
4. Quale è più moderno e la strada da percorrere
5. Qualcos'altro che potresti aggiungere?

Sembra che tu abbia una maniglia su come farli, non solo su quando farli.

Una transizione è un'animazione , solo una che viene eseguita tra due stati distinti: uno stato iniziale e uno finale. Come nel menu di un cassetto, lo stato iniziale potrebbe essere aperto e lo stato finale potrebbe essere chiuso o viceversa.

Se vuoi eseguire qualcosa che non coinvolge specificamente uno stato iniziale e uno stato finale, o hai bisogno di un controllo più accurato dei fotogrammi chiave in una transizione, allora devi usare un'animazione.

Lascerò che le definizioni parlino da sole (secondo Merriam-Webster):

Transizione : movimento, sviluppo o evoluzione da una forma, un palcoscenico o uno stile a un altro

Animazione : dotata della vita o delle qualità della vita; pieno di movimento

I nomi si adattano in modo appropriato ai loro scopi nei CSS

Quindi, l'esempio che hai fornito dovrebbe usare le transizioni perché è solo un passaggio da uno stato all'altro

Una risposta più breve, punto dritto:

Transizione:

1. Ha bisogno di un elemento scatenante (: hover,: focus ecc.)
2. Solo 2 stati di animazione (inizio e fine)
3. Utilizzato per animazioni più semplici (pulsanti, menu a discesa e così via)
4. Più facile da creare ma non così tante possibilità di animazione / effetto

Animation @keyframes:

1. Può essere utilizzato per animazioni infinite
2. Può impostare più di 2 stati
3. Senza confini

Entrambi usano l'accelerazione della CPU per un effetto molto più fluido.

1. L'animazione richiede molto più codice a meno che tu non stia usando ripetutamente la stessa transizione, nel qual caso un'animazione sarebbe migliore.

2. Puoi avere effetti diversi per scorrere dentro e fuori senza un'animazione. Basta avere una transizione diversa sia sulla regola originale che sulla regola modificata:

   .two-transitions {
       transition: all 50ms linear;
   }
   
   .two-transitions:hover {
       transition: all 800ms ease-out;
   }

3. Le animazioni sono solo astrazioni delle transizioni, quindi se la transizione è accelerata dall'hardware, l'animazione lo sarà. Non fa differenza.

4. Entrambi sono molto moderni.

5. La mia regola empirica è se uso la stessa transizione tre volte, probabilmente dovrebbe essere un'animazione. È più facile da mantenere e modificare in futuro. Ma se lo stai usando solo una volta, è più digitabile per creare l'animazione e forse non ne vale la pena.

Le animazioni sono proprio questo: un comportamento fluido dell'insieme di proprietà. In altre parole, specifica cosa dovrebbe accadere a un insieme di proprietà dell'elemento. Definisci un'animazione e descrivi come dovrebbe comportarsi questo insieme di proprietà durante il processo di animazione.

Le transizioni sull'altro lato specificano come una proprietà (o proprietà) dovrebbe eseguire la propria modifica. Ogni cambiamento. L'impostazione di un nuovo valore per determinate proprietà, sia esso con JavaScript o CSS, è sempre una transizione, ma per impostazione predefinita non è fluida. Impostando transitionlo stile CSS, si definisce un modo diverso (uniforme) per eseguire queste modifiche.

Si può dire che le transizioni definiscono un'animazione predefinita che dovrebbe essere eseguita ogni volta che la proprietà specificata è cambiata.

C'è qualcosa che si può dire delle prestazioni. Entrambi sfruttano l'accelerazione h / w?

Nel browser moderni, h / w accelerazione si verifica per le proprietà filter, opacitye transform. Questo è per entrambe le animazioni CSS e le transizioni CSS.

Credo che l' animazione CSS3 e la transizione CSS3 ti daranno la risposta che desideri.

Fondamentalmente di seguito sono riportati alcuni takeaway:

1. Se le prestazioni sono un problema, scegli Transizione CSS3.
2. Se lo stato deve essere mantenuto dopo ogni transizione, selezionare Transizione CSS3.
3. Se l'animazione deve essere ripetuta, scegliere l'animazione CSS3. Perché supporta il conteggio animazione-iterazione.
4. Se si desidera un'animazione complicata. Quindi si preferisce l'animazione CSS3.

Non preoccuparti che è meglio. La mia idea è che, se riesci a risolvere il tuo problema con solo una o due righe di codice, fallo e basta invece di scrivere un mucchio di codici che porteranno a comportamenti simili. Comunque, la transizione è come un sottoinsieme di animazioni. Significa semplicemente che la transizione può risolvere alcuni problemi mentre l'animazione d'altra parte può risolvere tutti i problemi. L'animazione ti consente di avere il controllo di ogni fase a partire dallo 0% fino al 100%, il che è qualcosa che la transizione non può davvero fare. L'animazione richiede di scrivere un sacco di codici mentre la transizione usa una o due righe di codice per ottenere lo stesso risultato a seconda di ciò su cui stai lavorando. Provenendo dal punto di JavaScript, è meglio usare la transizione. Tutto ciò che comporta solo due fasi, ad esempio l'inizio e la fine, usa la transizione. Riepilogo, se è stressante non