Transition Vs Animation Css 2.2.16
Diferencias y semejanzas ilustradas con ejemplos, códigos y explicaciones de uso entre las propiedades Css transition y animation y cuándo usar una, otra o las dos a la vez.
Transition Vs Animation Css
Al momento de aplicar alguna variación o cambio a un elemento en la web de forma gradual y sin cambios bruscos cabe la posibilidad de que surjan dudas entre qué vía Css utilizar: mediante la propiedad transition
o animation
.
Podría decirse que ambas propiedades permiten a un elemento pasar de un estado 'A' a otro final 'B' de forma progresiva, no instantánea. Entendiendo estado 'A' y 'B' como valores distintos de una propiedad Css determinada. Propiedad que, como es lógico, debe ser por definición animatable
.
Entonces la cuestión es, si ambas permiten hacer el cambio de forma progresivo, cuál usar. Y para tomar esa decisión nada mejor que ver las diferencias y semejanzas entre ambas propiedades.
La propiedad Css Transition
Una transición Css es el paso en el valor de una propiedad de un valor 'A' a otro valor 'D' en un tiempo determinado por el desarrollador, en el que sólo marca los valores inicial y final. Los pasos intermedios entre ambos los calcula el navegador. Dicho cambio siempre es por aproximación progresiva de 'A' hasta 'D'. No hay posibilidad de modificar la secuencia A→B→C→D
[ver nota 1 al final de esta sección].
Otra característica de la propiedad transition
es que sólo es posible un ciclo. Sólo se realiza una vez el tránsito de 'A' a 'D' y ahí permanece hasta que desaparece el motivo (evento) que inició la transición.
Y por último, como característica de las transition
, es que siempre se necesita un evento para realizarse. Ya sea por actuación del usuario (al hacer :hover
por ejemplo), por la carga del documento o porque pase a aplicarse alguna @media query
. Esto es así porque se necesitan dos reglas Css para definir en una el valor inicial y en otra el valor final.
El evento disparador
de la transición junto a las dos reglas para contener las dos declaraciones diferentes (propiedadA: valorA; // propiedadA: valorB;) es obligado por el efecto de la cascada en Css. Necesitamos dos reglas con diferente selector para aplicar al elemento sin que la última declarada prevalezca sobre la primera.
Excepto en aquellas propiedades que, por definición, tienen un valor inicial (o valor por defecto), como las transformaciones css, en cuyo caso se puede realizar la transición con la carga del documento (lectura y aplicación de la regla css):
elemento {
transform: scale(1.5);
transition: 10s;
}
Al cargar la hoja de estilos y crear el DOM el navegador aplicará la transformación al elemento desde el valor inicial [scale(1)] al final declarado [scale(1.5)] realizando el repaint
o redibujado del mismo durante el tiempo indicado y mostrándolo a dicho tamaño.
Aspectos controlables en Transition
La propiedad Css transition
es la forma acortada de declarar otras cuatro propiedades. Propiedades que permiten al desarrollador controlar otros cuatro aspectos de la animación:
transition: [Transition-property] [Transition-duration] [Transition-timing-function] [Transition-delay];
transition-property
la propiedad o propiedades CSS que cambiarán su valor.Transition-duration
el tiempo que toma la transición para realizarse.Transition-timing-function
La forma en que harán el cambio entre 'A' y 'D': de forma uniforme, con aceleraciones o incluso frenadas.Transition-delay
el retraso al iniciarse la transformación a partir del evento que la dispara.
Tanto si se usa la forma acortada de la propiedad transition
como en las extendidas se pueden declarar múltiples valores.
Es posible lograr efectos diferentes en la ejecución de la transición al realizarse el evento y el retorno al estado inicial al desaparecer declarándola también en la regla que afecta al elemento y la que contiene el evento:
elemento {
transition: width 1s ease 1s;
}
elemento:hover {
transition: width .5s linear 0s;
}
Para profundizar en el conocimiento de la propiedad Css transition
te remito al artículo Transitions Css3. Guia de aproximación y uso.
Nota 1:
No hay posibilidad de modificar la secuencia
a→b→c→d
Como Transition-timing-function
admite el valor cubic-bezier()
la afirmación es ligeramente discutible.
Cuándo usar Transition
See the Pen just another Css tabs (:checked) by Kseso (@Kseso) on CodePen.
El uso de la propiedad Css transition
está especialmente indicado para florituras sencillas: tipo efectos al :hover sobre enlaces, inputs o incluso elementos (mostrar u ocultar el figcaption> de un
figure>
por ejemplo).
La propiedad Css Animation y la regla @keyframes
elemento {
animation: nombre_animacion 5s;
}
La propiedad Css animation
eleva las transiciones a la enésima potencia. A diferencia de éstas donde cada propiedad va una sola vez del valor 'A' al 'D' en un tiempo 'X', las animaciones permiten ir del inicio al final pasando por cualquier otro valor, intermedio o fuera del rango AD
.
La potencia de la propiedad resumida css animation
no radica sólo en el número de propiedades de su grupo que engloba a ocho propiedades distintas, tantos como aspectos pueden ser controlados (frente a las cuatro de las transiciones), para ampliar sus posibilidades. Puedes verlas detalladas en este artículo:
animation-name
Define el nombre dado a la animación y es utilizado en el valor de la @keyframes.animation-duration
Define el tiempo durante el que se desarrolla cada ciclo de la animación.animation-timing-function
Describe cómo progresa en cada ciclo la animación.animation-iteration-count
Define el número de veces (ciclos) que la animación se ejecuta.animation-direction
Define si hay alternancia o no en el sentido en que se desarrollan cada ciclo de la animación.animation-play-state
Define si una animación se está ejecutando o está en pausa.animation-delay
Define el retraso desde que se aplica la animación hasta que esta comienza.animation-fill-mode
Define qué keyframe se muestra cuando no se está ejecutando la animación.
La propiedad animation
como ves en el código Css 4 previo en su declaración mínima sólo consta de un nombre de una animación (que el desarrollador asigna libremente) y un tiempo durante el cuál se realiza la animación (a-name y a-duration).
Y es en el nombre de la animación aplicada donde radica la potencia o posibilidades de las animaciones Css. Porque dicho nombre lo que hace es ser la llamada a una regla de reglas Css o at-rule
llamada @keyframes
. Esta at-rule tiene una característica: los selectores de cada regla contenida en ella son valores numéricos en porcentajes:
@keyframes nombre {
0% {
/*Bloque declaraciones*/
}
2%, 23% {
/*Bloque declaraciones*/
}
75% {
/*Bloque declaraciones*/
}
100% {
/*Bloque declaraciones*/
}
}
Cada regla incluida en @keyframes nombre
es una diapositiva o estado intermedio de la animación.
Estos valores en tanto por ciento de los selectores toman como base de cálculo el tiempo que toma cada ciclo de la animación indicado en la propiedad animation-duration
.
Y en cada bloque de declaraciones se puede incluir cualquier propiedad animatable
con cualquier valor admitido por ella.
Así una propiedad puede pasar de un valor inicial 'A' (en el momento o tiempo 0) a otro final 'Z' (en el momento o tiempo de ejecución 100%) y entre ambos pasar por cuantos necesitemos en los tiempos o momentos que necesitemos.
Y son cada una de estas keyframes
y el número de ellas que se necesiten aplicadas mediante la propiedad animation-name
las que le otorgan las posibilidades a a las animaciones Css junto al resto de las propiedades de su grupo que permiten indicar, por ejemplo, el número de veces que se desarrolla la animación animation-iteration-count
desde una a infinitas veces, o animation-direction
que marca si cada ciclo va del 0% al 100% o viceversa o en qué estado se queda la animación al pausarla o terminar.
Cuando usar animation + @Keyframes
Las animaciones Css están pensadas para situaciones donde necesites 'bailes' complejos: controlar multitud de valores diversos para varias propiedades con tiempos de paso dispares. Como por ejemplo en esta animación Css "aleatoria":
See the Pen Random animation puere CSS by Kseso (@Kseso) on CodePen.
En el artículo Animaciones aleatorias puro Css te cuento esta demo.
Pero el uso de las transiciones y animaciones Css no son excluyentes. Pueden convivir juntas. De hecho la utilización simultánea en algunos casos es imprescindible para lograr según qué. Como en esta vieja demo (de 2012) de un cubo en 3D donde hay un doble giro: para mostrar cada una de las 6 caras del cubo y a la vez que la imagen de cada cara también rote:
See the Pen My old 3D cube (double spin) by Kseso (@Kseso) on CodePen.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Hola el link "Otras Demos con Amination" no va Page no Found...Buen trabajo Te felicito
ResponderEliminarGracias Manolo por el aviso.
EliminarSe ve que Codepen ha debido cambiar la composición de la URL de búsqueda en su sitio desde la publicación original del artículo.
De momento mejor retirarlo del post.
Un saludo