Share
CSS ha madurado de muchas maneras a lo largo de los años, no solo en términos de animaciones CSS. Con cada día que pasa, más y más desarrolladores están creando interfaces de vida y respiración. En este artículo analizaremos el estado de las animaciones CSS, cómo ha crecido, de qué es capaz hoy y sobre algunos recursos y herramientas disponibles. Pongámonos en marcha!
El uso de la animación en la web está aumentando, en gran parte debido a la transición y @keyframes Adiciones a CSS. Hubo un tiempo en que las animaciones y el CSS no se conocían, pero ese no es el caso hoy. Los artículos, tutoriales, cursos premium e incluso guías de movimiento son mucho más accesibles ahora que antes. Combinatorio @keyframes con el animación propiedad, junto con transición finalmente le ha dado a los desarrolladores la oportunidad de diseñar el movimiento correctamente y otorgarle a las interfaces una personalidad y una vida que una vez no se tienen en cuenta.
De las pautas de movimiento de material de GoogleNunca ha habido un momento más emocionante para las animaciones CSS y el diseño de interacción que ahora mismo.!
Implementación actual de la animación La propiedad permite a los desarrolladores controlar la duración, el tiempo, el retraso, el conteo de iteraciones, la dirección, el modo de relleno y el estado de reproducción. La parte de tiempo también permite una pasos() función. Esta función de temporización especial 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 movimiento declarar posiciones utilizando desde, a e incluso porcentajes para animar entre valores de propiedad declarados. Eso es un gran comienzo, pero discutiremos en un momento donde se queda corto.
Luego está el glorioso transición propiedad; una propiedad tan elegante como animación y uno que nos permite controlar la velocidad de animación al cambiar las propiedades. El proceso de transición entre dos estados se suele denominar transición implícita; un término que describe los estados intermedios 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 introducción anterior está tomado de Up and Running With CSS Transitions por Craig Campbell.
La animación CSS puede ser poderosa como se sienta, pero aún carece de un aspecto particular que los animadores desean más; control timeline-esque. Lo que quiero decir con esto son secuencias que pueden influenciarse y manipularse según el tiempo.
@keyframes move-object from propiedad y valores de la posición inicial en 2s hacer esto esperar-hasta 4s esto sucede hasta propiedad y valores de la posición de parada
La sintaxis anterior no existe, pero pinta una imagen con más detalle de lo que anhelan los expertos en animación en la web. GreenSock, por ejemplo, es bien conocido por este tipo de secuenciación, pero desafortunadamente solo ocurre en JavaScript. ¿No sería genial tener esto en CSS también? creo que sí.
Video anterior tomado de la plataforma de animación GreenSock: Primeros pasos por Craig Campbell.
Ciertamente existe la capacidad de controlar animación y transición eventos mediante el uso de JavaScript para un mayor control granular de una secuencia. Con JavaScript, los desarrolladores pueden detectar el inicio de cada nueva iteración de animación, cuando se produce una animación, cuando la animación termina y lo mismo ocurre con los eventos de transición..
Estos son tiempos muy emocionantes para las herramientas de desarrollo del navegador para inspeccionar y ajustar las animaciones de CSS. La mayoría de los navegadores (Firefox, Chrome) permiten la inspección de animaciones CSS con respecto a Safari y Edge. Según lo que me dijo una fuente que trabaja para Microsoft, la inspección de animaciones es algo que el equipo de Microsoft realmente quiere hacer. Esperemos que esto sea lo mismo para Safari..
Respecto a los navegadores que hacer apoyo a la inspección de animación tenemos las siguientes habilidades ...
Accentsconagua
::antes de y ::después pseudo-elementos.fotogramas clave propiedad y valores sobre la marcha.fotogramas clave nombres.Si bien los desarrolladores tienen bastante para elegir en función de la lista anterior, aún requieren más herramientas en las animaciones con respecto a la interacción del usuario. Esto también podría ser conocido como interpolación de propiedades, la inserción de un valor intermedio en una serie calculándolo a partir de valores conocidos circundantes; como cuando cambias 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. Una vez más, algo que no se puede depurar ni inspeccionar desde ninguna herramienta de desarrollador proporcionada por un navegador en este momento.
El futuro parece brillante para la animación CSS, aunque con todo lo relacionado con las especificaciones, tiende a moverse lentamente. El CSS camino de movimiento módulo, Contiene, cambiará y el prefiere movimiento reducido La consulta de medios (que aún no es un estándar y solo WebKit) son las próximas funciones actuales para los animadores CSS.
Las rutas de movimiento permiten a los desarrolladores animar cualquier objeto gráfico a lo largo de una ruta especificada por el autor. Puede definir una ruta de una manera muy similar definida por SVG 1.1.
.my-element 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.4 z '); desplazamiento de movimiento: 0; movimiento-rotación: marcha atrás; los camino de movimiento define un camino que un elemento seguirá o seguirá. Nuestro desplazamiento de movimiento propiedad es la posición de posición del elemento en algún lugar del camino. La propiedad movimiento de rotación es la dirección a la que el elemento "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 que muestran camino de movimiento capacidades.
los cambiará La propiedad proporciona una forma para que los autores indiquen a los navegadores el tipo de cambios que se esperan para un elemento. Esto permite que el navegador configure las optimizaciones apropiadas antes de que se cambie el elemento..
.my-element will-change: transform;
Este tipo de optimización puede mejorar el tiempo de carga percibido y el diseño de una página al completar un trabajo costoso antes de que sea necesario. Dicho esto, se sugiere que los desarrolladores no apliquen cambiará a demasiados elementos, ya que puede consumir recursos y hacer que una página se ralentice.
Esta adición no especificada a WebKit crea estilos que evitan grandes áreas de movimiento para los usuarios que especifican una preferencia por movimiento reducido en Preferencias del Sistema.
@media (prefiere-movimiento reducido) .my-element animación: ninguno;
Esto es más una situación de accesibilidad en comparación con la creación de movimiento real. Una interesante para tener en cuenta, y una para revisar en su tiempo libre.
Este módulo CSS indica que el subárbol del elemento es independiente del resto de la página, lo que permite grandes optimizaciones por parte de los agentes de usuario cuando se usa correctamente. El más interesante para los animadores CSS es el pintar valor que se puede pasar.
.elemento-con-movimiento contiene: pintura;
Si el elemento que contiene está fuera de pantalla u oculto, el navegador puede directamente omitir la pintura de su contenido, ya que se garantiza que está fuera de pantalla u oculto. En última instancia, esto proporciona valor al garantizar una tubería de representación más rápida durante una pintura inicial. Este es todavía un borrador de trabajo en el W3C..
Hay muchas maneras de mantenerse al día con las animaciones CSS. A continuación hay algunas herramientas y recursos que incluyen especificaciones para leer en su tiempo libre. Si conoce otros recursos asombrosos y útiles, háganoslo saber en los comentarios y los agregaremos a la lista. Feliz animando!
