Casos de uso para transiciones CSS y animaciones CSS

Question

Por lo que yo entiendo, no hay tal cosa que podamos implementar usando transiciones css, pero no podemos implementar el uso de animaciones css, pero no viceversa.

Es decir, cualquier transición tiene un equivalente de animación css. Por ejemplo, éste

.ablock:hover {             
    position: relative;            
    -moz-transition-property: background-color, color;    
    -moz-transition-duration: 1s;         
    -webkit-transition-property: background-color, color;   
    -webkit-transition-duration: 1s;                
    color: red;              
    background-color:pink;           
} 

es un equivalente de lo siguiente:

.ablock:hover { 
    -moz-animation-duration:1s;         
    -moz-animation-name:transition;        
    -webkit-animation-duration:1s;         
    -webkit-animation-name:transition;        
}  

@-moz-keyframes transition {          
    to {               
     color: red;            
     background-color: pink;         
    } 
}  

@-webkit-keyframes transition {         
    to {               
     color: red;            
     background-color: pink;         
    } 
} 

Mi pregunta es - si un hablando de navegador que soporte ambas transiciones CSS y animaciones, ¿cuáles son los casos de uso para la elección de uno u otro enfoque? En cuanto a las transiciones, puedo nombrar solo una: tienen una sintaxis más sucinta, no tenemos que copiar pegar enormes portatarjetas de código para @ -moz-keyframes, @ -webkit-keyframes, etc.

En cuanto al control de javascript, las animaciones de flexibilidad y complejidad son una herramienta mucho más apropiada (al menos, a primera vista). Entonces, ¿qué son los casos de uso?

UPD: Bien, permítanme intentar enumerar la información de interés encontrada en las preguntas.

• Éste es contribuido por Roman Komarov. Diga, tenemos un div y div infantil. Mientras div principal está suspendido, estamos haciendo la transición del elemento secundario. Una vez que retiramos el mouse, la transición se cancela. La duración de esta cancelación es exactamente el tiempo que ya pasamos para la transición. La animación se cancela "inmediatamente". No sé, sin embargo, cuán estándar son esos dos comportamientos.

Answer 1

• animaciones pueden ser bucle (y no puede haber fotogramas clave, yeeah).
• Las transiciones pueden ser más flexibles y puede realizar transiciones fácilmente a diferentes valores y en diferentes circunstancias.

Si bien se puede emular algunas transiciones de animaciones (como se menciona en su post), las transiciones son sólo más potente:

• Usted acaba de decir qué propiedades debe animar y en qué condiciones (usando los diferentes selectores)
• puede desencadenar la transición de diferentes maneras:
  1. cambio de las propiedades en CSS para pseudo-clasificado: suspender,: activo etc. (Creación de puro de interfaz de usuario CSS)
  2. Cambiando propiedades en diferentes clases para diferentes propósitos.
  3. Cambiando propiedades en estilos en línea: junto con JS, es simplemente más poderoso que las animaciones.

Answer 2

Con transiciones que son capaces de hacer la transición entre cualquier valor de la propiedad definida, la cual desea realizar la transición. A modo de ejemplo, desea realizar la transición del color de un enlace, cuando se cernió y activa:

a { 
    color: #000; 
    transition: color .4s ease; 
} 
a:hover { 
    color: #888; 
} 
a:active { 
    color: #faa; 
} 

Eres independiente, el color que elija. Ahora, si desea utilizar el estilo de animación, debe establecer explícitamente el valor de color para los estados de animación. Y no puede animar fácilmente entre los tres estados: normal, hover y activo. Necesitas definiciones más complejas. Voy a probar este con animaciones:

a { 
    color: #000; 
    animation-duration: 0.4s; 
    animation-fill-mode: forwards; 
    animation-name: toDefault; 
} 
a:hover { 
    animation-duration: 0.4s; 
    animation-fill-mode: forwards; 
    animation-name: toHover; 
} 
a:active { 
    animation-duration: 0.4s; 
    animation-fill-mode: forwards; 
    animation-name: toActive; 
} 
@keyframes toDefault { 
    to { 
     color: #000; 
    } 
} 
@keyframes toHover { 
    to { 
     color: #888; 
    } 
} 
@keyframes toActive { 
    to { 
     color: #faa; 
    } 
} 

Ahora esto no incluye la animación de nuevo al estado anterior. No estoy seguro si puedes buscar eso.

En resumen: con las transiciones, puede animar un conjunto indefinido de propiedades y valores, mientras que las animaciones de fotogramas clave se utilizan para animaciones y/o transiciones bien definidas.