soy Kseso y esto EsCSS

Transition Vs Animation Css

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

xPor Kseso ✎ 2

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.

Transition Vs Animation Css

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];
  1. transition-property la propiedad o propiedades CSS que cambiarán su valor.
  2. Transition-duration el tiempo que toma la transición para realizarse.
  3. Transition-timing-function La forma en que harán el cambio entre 'A' y 'D': de forma uniforme, con aceleraciones o incluso frenadas.
  4. 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).

Otras Demos con Transition

Transition Vs Animation Css 2
Esta imagen y la de inicio del post gentileza de Internet Archive Book Images

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:

  1. animation-name Define el nombre dado a la animación y es utilizado en el valor de la @keyframes.
  2. animation-duration Define el tiempo durante el que se desarrolla cada ciclo de la animación.
  3. animation-timing-function Describe cómo progresa en cada ciclo la animación.
  4. animation-iteration-count Define el número de veces (ciclos) que la animación se ejecuta.
  5. animation-direction Define si hay alternancia o no en el sentido en que se desarrollan cada ciclo de la animación.
  6. animation-play-state Define si una animación se está ejecutando o está en pausa.
  7. animation-delay Define el retraso desde que se aplica la animación hasta que esta comienza.
  8. 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.

avatar del Editor del blog

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

Comentarios: 2

  1. Hola el link "Otras Demos con Amination" no va Page no Found...Buen trabajo Te felicito

    ResponderEliminar
    Respuestas
    1. Gracias Manolo por el aviso.
      Se 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

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap