CSS: Animación vs. Transición

Entonces, entiendo cómo realizar transiciones CSS3 y animaciones. Lo que no está claro, y he buscado en Google, es cuándo usar cuál.

Por ejemplo, si quiero hacer que una pelota rebote, está claro que la animación es el camino a seguir. Podría proporcionar fotogramas clave y el navegador haría los cuadros intermedios y tendré una buena animación.

Sin embargo, hay casos en que dicho efecto se puede lograr de cualquier manera. Un ejemplo simple y común sería implementar el menú de cajones deslizantes estilo Facebook:

Este efecto se puede lograr a través de transiciones como esta:

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

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

http://jsfiddle.net/NwEGz/

O, a través de animaciones así:

.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 que se ve así:

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

Y, este script jQuery que lo acompaña:

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

Lo que me gustaría entender es cuáles son los pros y los contras de estos enfoques.

1. Una diferencia obvia es que animar requiere mucho más código.
2. La animación da una mejor flexibilidad. Puedo tener diferentes animaciones para deslizarme hacia adentro y hacia adentro
3. ¿Hay algo que se pueda decir sobre el rendimiento? ¿Ambos aprovechan la aceleración h / w?
4. ¿Cuál es más moderno y el camino a seguir?
5. ¿Algo más que puedas agregar?

Parece que ya sabes cómo hacerlo, pero no cuándo hacerlo.

Una transición es una animación , solo una que se realiza entre dos estados distintos, es decir, un estado inicial y un estado final. Al igual que un menú de cajón, el estado inicial podría estar abierto y el estado final podría estar cerrado, o viceversa.

Si desea realizar algo que no implique específicamente un estado inicial y un estado final, o necesita más control de grano fino sobre los fotogramas clave en una transición, entonces debe usar una animación.

Dejaré que las definiciones hablen por sí mismas (según Merriam-Webster):

Transición : un movimiento, desarrollo o evolución de una forma, etapa o estilo a otro

Animación : Dotada de vida o de las cualidades de la vida; lleno de movimiento

Los nombres se ajustan adecuadamente a sus propósitos en CSS

Entonces, el ejemplo que diste debería usar transiciones porque es solo un cambio de un estado a otro

Una respuesta más corta, directa:

Transición:

1. Necesita un elemento desencadenante (: hover,: focus, etc.)
2. Solo 2 estados de animación (inicio y fin)
3. Se usa para animaciones más simples (botones, menús desplegables, etc.)
4. Más fácil de crear pero no tantas posibilidades de animación / efecto

Animación @ keyframes:

1. Se puede usar para animaciones infinitas
2. Puede configurar más de 2 estados
3. Sin límites

Ambos usan la aceleración de la CPU para un efecto mucho más suave.

1. La animación requiere mucho más código a menos que esté utilizando la misma transición una y otra vez, en cuyo caso una animación sería mejor.

2. Puede tener diferentes efectos para deslizarse dentro y fuera sin una animación. Solo tiene una transición diferente tanto en la regla original como en la regla modificada:

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

3. Las animaciones son solo abstracciones de transiciones, por lo que si la transición es acelerada por hardware, la animación lo será. No hace ninguna diferencia.

4. Ambos son muy modernos.

5. Mi regla general es que si uso la misma transición tres veces, probablemente debería ser una animación. Esto es más fácil de mantener y modificar en el futuro. Pero si solo lo usa una vez, es más mecanografiado para hacer la animación y tal vez no valga la pena.

Las animaciones son solo eso: un comportamiento suave del conjunto de propiedades. En otras palabras, especifica lo que debe sucederle a un conjunto de propiedades del elemento. Defina una animación y describa cómo debe comportarse este conjunto de propiedades durante el proceso de animación.

Las transiciones en el otro lado especifican cómo una propiedad (o propiedades) debe realizar su cambio. Cada cambio Establecer un nuevo valor para cierta propiedad, ya sea con JavaScript o CSS, siempre es una transición, pero por defecto no es sencillo. Al establecer transitionel estilo CSS, define una forma diferente (suave) de realizar estos cambios.

Se puede decir que las transiciones definen una animación predeterminada que debe realizarse cada vez que la propiedad especificada ha cambiado.

¿Hay algo que se pueda decir sobre el rendimiento? ¿Ambos aprovechan la aceleración h / w?

En los navegadores modernos, se produce una aceleración h / w para las propiedades filter, opacityy transform. Esto es para animaciones CSS y transiciones CSS.

Creo que la animación CSS3 frente a la transición CSS3 te dará la respuesta que deseas.

Básicamente a continuación se presentan algunas conclusiones:

1. Si el rendimiento es una preocupación, elija la transición CSS3.
2. Si se debe mantener el estado después de cada transición, elija la transición CSS3.
3. Si la animación necesita repetirse, elija la animación CSS3. Porque admite animación-iteración-recuento.
4. Si se desea una animación complicada. Entonces se prefiere la animación CSS3.

No te molestes, que es mejor. Mi obsequio es que, si puede resolver su problema con solo una o dos líneas de código, simplemente hágalo en lugar de escribir un montón de códigos que darán lugar a un comportamiento similar. De todos modos, la transición es como un subconjunto de animación. Simplemente significa que la transición puede resolver ciertos problemas, mientras que la animación, por otro lado, puede resolver todos los problemas. La animación le permite tener el control de cada etapa, desde el 0% hasta el 100%, que es algo que la transición realmente no puede hacer. La animación requiere que escribas un montón de códigos mientras que la transición usa una o dos líneas de código para realizar el mismo resultado dependiendo de en qué estés trabajando. Viniendo desde el punto de JavaScript, es mejor usar la transición. Cualquier cosa que involucre solo dos fases, es decir, comenzar y terminar, usa la transición. Resumen, si es estresante don '