Animaciones en CSS

Un esquema básico del funcionamiento de las animaciones en CSS.

Las animaciones en CSS3 (en inglés, CSS animations) forman un módulo que permite animar las transiciones entre diferentes propiedades de los elementos de un documento HTML. Consta de dos partes: un estilo que describe condiciones específicas de la animación y una serie de fotogramas que indican tanto el estado inicial y final como secuencias intermedias.[1]​ Cuenta con contabilidad, entre otros, con los navegadores Google Chrome, Firefox, Microsoft Edge y Internet Explorer (desde las versiones 4, 5, 12 y 10, respectivamente).[2]​

Funcionamiento

[editar]

Con @keyframes es posible definir diferentes puntos por los cuales debe transitar la animación.[3]​ En el siguiente ejemplo, que lleva a cabo un movimiento desde la izquierda hasta la derecha de la pantalla, se especifican solo el momento inicial y el final: 

@keyframes ejemplo{
  from {left:0;}
  to {left:100%;}
}

Lo que marca la diferencia entre esta regla y la propiedad transition es la posibilidad de definir múltiples fotogramas concretos para la animación mediante la especificación de porcentajes.[4]​ La regla mostrada a continuación cambiaría el color de fondo de un elemento de forma paulatina,[5]​ desde rojo hasta azul, pasando por el naranja, amarillo y verde, a la par que se desplaza en un movimiento dextrógiro: 

@keyframes ejemplo-color {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:orange; left:200px; top:0px;}
  50%  {background-color:yellow; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:blue; left:0px; top:0px;}
}

Para aplicar estos @keyframes es necesario añadir al menos las siguientes propiedades al elemento HTML a animar (por ejemplo, un div):[5]​ 

div {
  animation-name: ejemplo;
  animation-duration: 4s;
}

Propiedades

[editar]

La propiedad animation cuenta con varias sub-propiedades —con diferentes valores— que configuran aspectos concretos de la animación definida con @keyframes, como la duración o el número de repeticiones.[1]​ Estos son todos los atributos modificables:[4]​[6]​

  • animation-delay: retraso que se aplica al inicio de la animación.
  • animation-direction: indica si la animación retrocede hasta el fotograma de inicio al finalizar la secuencia o si comienza desde el principio al llegar al terminar, entre otras opciones.[7]​
  • animation-duration: marca la duración de cada ciclo completo de.
  • animation-fill-mode: permite definir el @keyframes visible cuando la animación no se esté ejecutando.
  • animation-iteration-count: define el número de repeticiones de la animación. Es posible indicar el valor infinite para que los ciclos sean ininterrumpidos.
  • animation-name: especifica el nombre de una o más animaciones que se asignan al elemento HTML.
  • animation-play-state: permite pausar y reanudar la secuencia.
  • animation-timing-function: señala el ritmo de la animación.

La propiedad abreviada animation posibilita agrupar todas las sub-propiedades en una sola, como se muestra en el ejemplo siguiente:[8]​ 

/*animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.*/
div {
  animation: ejemplo 4s ease 1s 1 normal none running;
}

Gráficos vectoriales escalables

[editar]
SVG animado usando CSS3.

Además de hover los SVG admiten la regla @keyframes, lo que permite animar un conjunto limitado de transformaciones. Firefox y Chrome usaron las extensiones @-moz-keyframes y @-webkit-keyframes, respectivamente, antes de que se agregara @keyframes a la especificación CSS3.[9]​

Controversia

[editar]

El desarrollo de las animaciones CSS despertó en un comienzo «la preocupación de aquellos que prefieren la animación a través de JavaScript» o,[10]​ en menor medida, el lenguaje SMIL; otros medios afirmaron que se trataba de un movimiento de Apple Inc., el patrocinador principal del proyecto WebKit, para eludir la inclusión de Adobe Flash (y las animaciones Flash) en la línea iOS de la empresa de dispositivos móviles que utilizan Safari.[11]​[12]​[13]​

Véase también

[editar]

Referencias

[editar]
  1. ↑ a b «Usando animaciones CSS». MDN Web Docs. Consultado el 18 de diciembre de 2021. 
  2. ↑ «CSS Animation». Can I use (en inglés). Consultado el 18 de diciembre de 2021. 
  3. ↑ «Animate css - Cómo crear animaciones CSS rápido». 24 de enero de 2019. Consultado el 18 de diciembre de 2021. 
  4. ↑ a b «Transiciones y animaciones CSS.». Paradigma digital. Consultado el 18 de diciembre de 2021. 
  5. ↑ a b «CSS Animations». W3Schools (en inglés). Consultado el 18 de diciembre de 2021. 
  6. ↑ «CSS Animations». MDN Web Docs (en inglés). Consultado el 18 de diciembre de 2021. 
  7. ↑ «animation-direction». MDN Web Docs (en inglés). Consultado el 18 de diciembre de 2021. 
  8. ↑ «animation». MDN Web Docs (en inglés). Consultado el 18 de diciembre de 2021. 
  9. ↑ Jackson, Dean; Baron, L. David; Atkins Jr., Tab; Birtles, Brian; Hyatt, David; Marrin, Chris; Galineau, Sylvain, eds. (11 de octubre de 2018). «CSS Animations Level 1». W3C (en inglés). CSS Working Group. Consultado el 9 de abril de 2021. 
  10. ↑ Snook, Jonathan (31 de octubre de 2007), CSS Animations in Safari (en inglés), Snook.ca, archivado desde el original el 27 de enero de 2021, consultado el 9 de abril de 2021 .
  11. ↑ Kim, Arnold (6 de febrero de 2009), CSS Animation Coming to Safari, Already in iPhone. Less Dependence on Flash? (en inglés), MacRumors.com, consultado el 9 de abril de 2021 .
  12. ↑ Palmer, Robert (6 de febrero de 2009), CSS Animation to replace need for Flash in MobileSafari? Not likely (en inglés), The Unofficial Apple Weblog, consultado el 9 de abril de 2021 .
  13. ↑ Ferrari, Vincent (9 de febrero de 2009), CSS Animations: A Flash Substitute? (en inglés), Apple Thoughts, consultado el 9 de abril de 2021 .

Enlaces externos

[editar]