El estado de la animación CSS

CSS ha madurado de muchas maneras a lo largo de los años, no menos en términos de animaciones CSS. Con cada día que pasa más y más desarrolladores están creando vida, las interfaces de respiración. En este artículo vamos a ver el estado de las animaciones CSS, cómo han crecido, lo que son capaz de hacer hoy por hoy, y cubriremos algunos recursos y herramientas disponibles. ¡Pongámonos en marcha!

Crecimiento

El uso de la animación en la web está aumentando, en gran parte debido a la transition y @keyframes adicionales al CSS. Hubo una vez un momento en que las animaciones y CSS no se conocían, pero hoy ese no es el caso. Artículos, tutoriales, cursos superiores e incluso directrices de movimiento son mucho más accesibles ahora de lo que eran antes. Combinando @keyframes con la propiedad animation, junto con transition finalmente ha dado a los desarrolladores la oportunidad de diseñar el movimiento correctamente y presta personalidad a las interfaces y la vida que alguna vez no fue considerada.

¡Nunca ha habido un momento más emocionante para las animaciones CSS y el diseño de interacción como ahora mismo!

Propiedad de animación y fotogramas clave

La implementación actual de la propiedad animation permite a los desarrolladores controlar la duración, tiempo, retardo, cuenta de interacciones, dirección, modo de relleno y estado de reproducción. La parte de temporizador también permite una función steps(). Esta función especial del temporizador rompe una animación o transición en segmentos (como una tira de película), en lugar de una transición continua de un estado a otro. Los fotogramas clave permiten a los desarrolladores de movimientos declarar las posiciones usando from, to e incluso porcentajes para animar entre los valores de propiedad declarados. Ese es un gran comienzo, pero vamos a discutir en un momento en qué se queda corto.

Propiedad transición

Luego está la gloriosa propiedad transition; una propiedad tan sofisticada como animation y una que nos permite controlar la velocidad de la animación al cambiar propiedades. El proceso de transición entre dos estados es típicamente llamado transición implícita; un término que describe los estados entre los estados inicial y final, definidos implícitamente por el navegador. Las transiciones actualmente permiten la personalización de la propiedad, el tiempo, la duración y el retraso.

El video de la introducción es tomado de En marcha con las transiciones CSS por Craig Campbell.

¿Qué le falta?

La animación CSS puede ser potente como se siente, pero todavía carece de un aspecto particular que los animadores desean más; control de tiempo. Lo que quiero decir es que con esto, las secuencias pueden ser influenciadas y manipuladas en base al tiempo.

1

@keyframes move-object {

2

    from { starting position property and values }

3

    at 2s { do this }

4

    wait-until 4s { this happens }

5

    to { stop position property and values }

6

}

La sintaxis anterior no existe, pero dibuja una imagen con más detalle de lo que anhelan los expertos en animación web. GreenSock por ejemplo, es bien conocido por este tipo de secuenciación, pero lamentablemente sólo ocurre en JavaScript. ¿No sería genial tener esto en CSS también? Creo que si.

Video tomado de la Plataforma de Animación de GreenSock: Primeros pasos por Craig Campbell.

Ciertamente, existe la posibilidad de controlar eventos de animation y transition mediante el uso de JavaScript para un control granular adicional de una secuencia. Con JavaScript, los desarrolladores pueden detectar el inicio de cada nueva interacción de animación; cuando inicia y cuando se termina la animación, y lo mismo ocurre con los eventos de transición.

Inspección del navegador y herramientas

Estos son tiempos bastante emocionantes para las herramientas de desarrollador del navegador con el fin de inspeccionar y ajustar las animaciones CSS. La mayoría de los navegadores (Firefox, Chrome) permiten la inspección de animaciones CSS. Con respecto a Safari y Edge, me ha dicho una fuente que trabaja para Microsoft que la inspección de animaciones es algo que el equipo de Microsoft realmente quiere hacer. Esperemos que suceda lo mismo para Safari.

Animation Timeline in Chrome DevTools - coming soon

Firefox Developer Tools: presets in the cubic Bézier editor

Con respecto a los navegadores que son compatibles con la inspección de animación contamos con las siguientes habilidades...

• Inspección de la línea de tiempo que se puede limpiar.
• Mostrar animaciones aplicadas a los pseudo-elementos :: before y ::after.
  
• Ajustar la propiedad keyframes y los valores sobre el avance.
• Reporte de nombres keyframes.
• Visualización de propiedades animadas.
• Facilitar los recolectores y los editores de la curva bézier.
• Codificación de color para saber si el evento es una transición, un fotograma clave o una animación web.
• Control y cambio de la velocidad de reproducción.

Mientras los desarrolladores tienen mucho que elegir basados en la lista anterior, todavía requieren de más herramientas en animaciones con respecto a la interacción del usuario. Esto también podría ser conocido como propiedad de interpolación, la inserción de un valor intermedio en una serie calculándolo a partir de valores conocidos circundantes; al igual que cuando cambia a un nuevo valor con transiciones. Estas animaciones dinámicas / reactivas pueden comenzar en cualquier momento, son indefinidas y tienen duraciones variables basadas en la interacción del usuario. Algo una vez más que no se puede depurar o inspeccionar desde cualquier herramienta de desarrollo proporcionada por un navegador en este momento.

El futuro

El futuro parece brillante para la animación CSS, a través de todo lo relacionado con las especificaciones tiende a moverse lento. El módulo motion-path (trazado de movimiento) CSS, contain, will-change y la consulta de medios de movimiento prefers-reduced-motion (todavía no son un estándar y WebKit solamente) son las características actuales para animadores de CSS.

Trazado de movimiento CSS

La trayectoria de movimiento permite a los desarrolladores animar cualquier objeto gráfico a lo largo de una ruta especificada por el autor. Se puede definir una ruta de una manera muy similar a la definida por SVG 1.1.

1

.my-element {

2

    motion-path: path('M93.9,46.4c9.3,9.5,13.8,17.9,23.5,17.9s17.5-7.8,17.5-17.5s-7.8-17.6-17.5-17.5c-9.7,0.1-13.3,7.2-22.1,17.1 c-8.9,8.8-15.7,17.9-25.4,17.9s-17.5-7.8-17.5-17.5s7.8-17.5,17.5-17.5S86.2,38.6,93.9,46.4z');

3

    motion-offset: 0;

4

    motion-rotation: reverse;

5

}

La trayectoria de movimiento motion-path define el camino que un elemento seguirá o moverá. Nuestra propiedad desplazamiento de movimiento motion-offset es la colocación del elemento en algún lugar del camino. La propiedad movimiento-rotación motion-rotation es la dirección en la que el elemento "se enfrenta" a medida que se mueve a lo largo del camino.

Echa un vistazo a estas colecciones de demostraciones en CodePen de Dan Wilson que proporcionan ejemplos en vivo en donde muestran las capacidades de motion-path.

• Demo de mi ruta de movimiento en CSS por Dan Wilson
• Trazado de movimiento CSS por Dan Wilson

Will-Change

La propiedad will-change proporciona una manera para que los autores sugieran a los navegadores el tipo de cambios que se esperan para un elemento. Esto permite al navegador configurar oportunamente las optimizaciones adecuadas antes de que el elemento se cambie realmente.

1

.my-element {

2

  will-change: transform;

3

}

Este tipo de optimización puede mejorar el tiempo de carga percibido y el diseño de una página completando un trabajo arduo antes de tiempo y antes de que realmente se requiera. Diciendo esto, se sugiere que los desarrolladores no apliquen will-change a demasiados elementos, ya que puede consumir recursos y hacer que la página se ralentice.

Prefers-Reduced-Motion

Esta adición no especificada a WebKit crea estilos que evitan grandes áreas de movimiento para los usuarios que especifican una preferencia por el movimiento reducido en las Preferencias del sistema.

1

@media (prefers-reduced-motion) {

2

  .my-element {

3

     animation: none;

4

  }

5

}

Esto es más una situación de accesibilidad frente a la creación de movimiento real. Algo interesante a considerar, sin embargo, echa un vistazo en tu tiempo libre.

Contain

Este módulo CSS indica que el sub-árbol del elemento es independiente del resto de la página, lo que permite optimizaciones pesadas por agentes de usuario cuando se usan correctamente. El más interesante para los animadores CSS es el valor de pintura paint que se puede pasar.

1

.element-with-motion {

2

    contain: paint;

3

}

Si el elemento que contiene está fuera de la pantalla u oscurecido, el navegador puede saltar directamente la pintura de su contenido, ya que se garantiza que esté fuera de pantalla u oscurecido. Esto, en última instancia, proporciona valor al asegurar una canalización de renderización más rápida durante una pintura inicial. Este proyecto se está trabajando actualmente en la W3C.

Recursos

Hay muchas maneras de mantenerse al día con las animaciones CSS. A continuación, te presentaré algunas herramientas y recursos, incluyendo especificaciones para leer en tu tiempo libre. Si sabes de otros recursos impresionantes y útiles por favor avísanos en los los comentarios y los agregaremos a la lista. ¡Feliz animación!

Especificaciones de W3C

• Funciones de sincronización CSS Nivel 1
• Módulo del camino de movimiento Nivel 1
• CSS cambiará el módulo Nivel 1
• Módulo de Animaciones CSS Nivel 3

Aprendizaje

• Introducción de un principiante a la animación CSS por Catalin Miron
  
• 9 cursos populares de animación CSS en Envato Tuts+
• Rocas de animación CSS
• Cómo leer las curvas cúbicas por Val Head
• Una introducción a la animación de Keyframes CSS en Smashing Magazine
• Animaciones Esenciales en la Web: Animaciones y transiciones CSS por Rachel Nabors
  
• Jank Free
• Introducción a la transformación 3D en CSS por David DeSandro
• Usando CSS, ¿puedo animar <CSS Property>?
• Animaciones y transiciones CSS. Módulo de movimiento CSS por Ruslan Homyak
• La guía de bolsillo de animaciones CSS por Val cabeza

Herramientas

• Stylie por Jeremy Kahn
• Animate.css por Daniel Eden
• Componentes materiales para la web
  
• Easings por Andrey Sitnik
• Animista por Ana Travas
  
• WAIT! Animate por Will Stone
  
• cssanimate.com Generador de animación de fotogramas clave de CSS3
  
• cubic-bezier.com por Lea Verou
  
• cssreference.io Una guía visual gratuita a CSS, por Jeremy Thomas
• Motion IU de ZURB
  
• Magic Animaciones CSS3 con efectos especiales, por Christian Pucci
  
• Hover.css por Ian Lunn
  
• CSSYNTH por Bennett Feely