CSS: animazione vs transizione

Question

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

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

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

Questo effetto può essere ottenuto attraverso transizioni in questo modo:

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

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

http://jsfiddle.net/NwEGz/

Oppure, attraverso animazioni in questo modo:

.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 così:

<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 accompagnamento lo script jQuery:

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

Quello che mi piacerebbe capire è quali sono i pro ei contro di questi approcci.

1. Una differenza ovvia è che l'animazione richiede molto più codice.
2. L'animazione offre una maggiore flessibilità. Posso avere un'animazione diversa per lo scorrimento e in
3. C'è qualcosa che si può dire sulle prestazioni. Entrambi approfittano dell'accelerazione h/w?
4. Qual è il più moderno e il modo in cui andare avanti
5. Qualcos'altro che è possibile aggiungere?

Answer 1

Sembra che tu' Hai una mano su come farli, ma non quando li fai.

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

Se si desidera eseguire qualcosa che non specificamente comportano uno stato di inizio e uno stato finale, o è necessario un controllo a grana più fine sopra i fotogrammi chiave di una transizione, quindi devi usare un'animazione .

Answer 2

1. Animazione vuole molto di più il codice a meno che non si sta utilizzando la stessa transizione più e più volte, nel qual caso l'animazione sarebbe meglio.

2. È possibile avere effetti diversi per lo scorrimento dentro e fuori senza animazione. Basta avere una transizione diversa sia la regola originale e lo stato modificato:

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

3. animazioni sono solo astrazioni di transizioni, quindi se la transizione è con accelerazione hardware, l'animazione sarà. Non fa differenza.

4. Entrambi sono molto moderni.

5. La mia regola generale è che se uso la stessa transizione per tre volte, dovrebbe probabilmente essere un'animazione. Questo è più facile da mantenere e modificare in futuro. Ma se la usi solo una volta, è più digitante per creare l'animazione e forse non ne vale la pena.

Answer 3

vi svelo le definizioni parlano da soli (secondo il Merriam-Webster):

Transizione: Un movimento, lo sviluppo, o l'evoluzione da una forma, palcoscenico, o lo stile di altro

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

I nomi in modo appropriato si adattano i loro scopi in CSS

Così, l'esempio che ha dato dovrebbe utilizzare transizioni perché è solo un cambiamento da uno stato all'altro

Answer 4

Animazioni sono proprio questo: un buon funzionamento del set di proprietà. In altre parole, specifica quello che dovrebbe accadere a un insieme di proprietà dell'elemento. Definisci un'animazione e descrivi come questo insieme di proprietà dovrebbe comportarsi durante il processo di animazione.

transizioni sull'altro lato specificare come una proprietà (o in) devono svolgere il loro cambiamento. Ogni cambiamento L'impostazione di un nuovo valore per determinate proprietà, sia con JavaScript o CSS, è sempre una transizione, ma per impostazione predefinita non è liscia. Impostando transition nello stile css si definisce un modo diverso (liscio) per eseguire queste modifiche.

Si può dire che transizioni definiscono un predefinito animazione che deve essere eseguita ogni volta che la proprietà specificata è cambiato.

Answer 5

Credo che CSS3 animation vs CSS3 transition ti darà la risposta che desideri.

Fondamentalmente seguito sono riportati alcuni take away:

1. Se le prestazioni sono un problema, quindi scegliere la transizione CSS3.
2. Se lo stato deve essere mantenuto dopo ogni transizione, quindi selezionare la transizione CSS3.
3. Se è necessario ripetere l'animazione, selezionare Animazione CSS3. Perché supporta il numero di iterazioni animate.
4. Se si desidera un'animazione complicata.Quindi è preferibile l'animazione CSS3.