Se utiliza bien, la animación CSS es una herramienta increíblemente útil y poderosa. Puede agregar interés o emoción creativa, dirigir la mirada del usuario, explicar algo de forma rápida y sucinta, y mejorar la usabilidad. Por esa razón, los últimos años han visto más y más animación en los sitios y en la aplicación.

en este artículo, resumimos algunos de los ejemplos de animación CSS más geniales que hemos visto y le mostramos cómo recrearlos., Siga leyendo para conocer una serie de tutoriales en profundidad y efectos inspiradores (y enlaces a su código) para explorar.

¿qué es la animación CSS?

la animación CSS es un método para animar ciertos elementos HTML sin tener que usar el procesador y JavaScript o Flash hambrientos de memoria. No hay límite para el número o la frecuencia de las propiedades CSS que se pueden cambiar. Las animaciones CSS se inician especificando fotogramas clave para la animación: estos fotogramas clave contienen los estilos que tendrá el elemento.,

si bien puede parecer limitado cuando se trata de animación, CSS es en realidad una herramienta muy poderosa y es capaz de producir animaciones de 60fps maravillosamente suaves. «Ofrecer animaciones reflexivas y fluidas que contribuyan a una profundidad significativa a su sitio no tiene por qué ser difícil», dice el desarrollador web de front end Adam Kuhn. «Las propiedades CSS modernas ahora le ofrecen casi todas las herramientas que necesitará para crear experiencias memorables para sus usuarios.,»

Las mejores animaciones todavía tienen sus raíces en los 12 principios clásicos de animación de Disney – verás varias menciones de eso a lo largo de estos ejemplos de animación CSS, por lo que vale la pena revisar ese artículo antes de comenzar. También puede explorar nuestro resumen de excelentes videos musicales animados para obtener más ejemplos e inspiración.

la regla de oro es que tus animaciones CSS no deben ser exageradas, incluso un pequeño movimiento puede tener un gran impacto, y demasiado puede distraer e irritar a los usuarios., Aquí están nuestros ejemplos favoritos y cómo crearlos.

ratón Divertido efecto

  • Autor: Donovan Hutchinson

Este es un divertido efecto que sigue a su ratón. Podría ser útil cuando desea llamar la atención sobre un elemento en su página.

necesitamos muy poco HTML para este efecto:

<div class="demo"> <div class="perspective-container"> <div class="card"></div> </div></div>

primero, colocamos la demo y establecemos la perspectiva para nuestra transformación 3D:

luego diseñamos el div que queremos animar:

Aquí establecemos un fondo, luego establecemos el desbordamiento en oculto para que podamos agregar un efecto de brillo más tarde., También establecemos variables css, sheenX y sheenY.

estas variables de brillo ayudarán a posicionar el efecto de brillo. Los usamos en el pseudo-elemento de nuestra tarjeta:

Aquí nos aseguramos de que el pseudo-elemento sea más grande que el contenedor. Esto nos dará algo para deslizarnos por la parte superior de la tarjeta usando transform.

la propiedad transform está haciendo uso de las variables CSS que establecimos anteriormente. Los configuraremos con JavaScript. Vamos a configurar el JavaScript para escuchar primero los eventos del ratón:

Documento.,onmousemove = handleMouseMove;

Ahora necesitamos una función handleMouseMove para manejar onmousemove:

Nuestra función toma la altura y el ancho de la ventana y crea un ángulo en los ejes X e Y. Luego establecemos estos al estilo de transformación de nuestra tarjeta. Esto le da a la tarjeta un ángulo basado en el ratón!

a continuación llamamos a una función para establecer la posición del pseudo-elemento:

nuestro pseudo-elemento se ve mejor cuando se mueve en la dirección opuesta al ratón. Para lograr esto creamos un número entre -0.5 y 0.5 que cambia en la dirección opuesta calculando la relación por -1.,

multiplicamos este número por 800 ya que queremos que se escale hasta un máximo de 400px, que es hasta qué punto establecemos el pseudo-elemento sheen fuera de la tarjeta.

Por último, establecemos estos valores de desplazamiento en nuestras propiedades de variables CSS, y el renderizador del navegador hace el resto.

Ahora tenemos una carta que gira hacia nuestro ratón mientras el efecto de brillo se mueve en la dirección opuesta en la parte superior. Esto crea un efecto agradable y llamativo.,

the big reveal

  • Autor: Adam Kuhn

Los efectos de revelación de contenido animado parecen ser bastante populares en este momento, y utilizados correctamente pueden capturar el enfoque del usuario y atraer a su audiencia. Has visto esto antes: un bloque de color crece de un lado u otro horizontal o verticalmente, y luego se retira al lado opuesto, esta vez revelando algún texto o una imagen debajo. Es un concepto que puede parecer complicado, pero en realidad se basa en solo unas pocas cosas.,

primero, configuraremos nuestro posicionamiento de elementos (descargue el código completo aquí) – defínalo como relativo (solo la estática fallará en este caso). En los casos de texto, es mejor permitir la altura y el ancho automáticos, aunque un poco de relleno no hace daño. También definiremos un origen de transformación, en el caso del elemento padre queremos usar la posición inicial. Como queremos que el elemento se oculte inicialmente, usaremos una transformación de escala a lo largo del eje apropiado para reducirlo.

a continuación, un pseudo elemento para enmascarar nuestro Padre, estableciendo el origen de transformación a la opción opuesta., Finalmente, encadene las animaciones, utilizando las funciones de temporización o retrasos para compensar cada una.

Nota, hemos desplazado las animaciones de los elementos padre y pseudo con un retardo que indica a la caja que oculta nuestro texto que lo revele solo después de que el elemento en sí haya escalado completamente a la vista. Echa un vistazo a la Codepen a continuación.

escalonar en

  • Autor: Adam Kuhn

Una vez que haya comenzado a acumular una biblioteca decente de varios fragmentos de facilitación, es hora de buscar otras formas de mejorar la profundidad de sus animaciones, y una de las mejores maneras es compensar sus elementos animados.,

es muy común que un activador JavaScript esté configurado para iniciar un montón de animaciones basadas en la posición de desplazamiento, solo para encontrar todos los elementos que se mueven efectivamente en tándem. Afortunadamente CSS en sí proporciona una propiedad simple que puede hacer (o romper) su experiencia animada: animación-retraso.

digamos, por ejemplo, que tenemos una cuadrícula de imágenes que queremos animar en frame cuando el Usuario se desplaza. Hay varias formas en que podríamos activar esto, lo más probable es que agreguemos clases a los elementos a medida que ingresan a la vista., Sin embargo, esto puede ser una carga pesada en el navegador, y se puede evitar simplemente agregando una sola clase a un elemento contenedor y definiendo retrasos de animación en elementos secundarios.

Este es un caso de uso particularmente bueno para preprocesadores como SCSS o LESS, que nos permiten usar un bucle @for para iterar a través de cada elemento.

#parent{.child{ animation: animationName 1.5s ease-in-out 1 forwards;@for $i from 1 through 20{ &:nth-of-type(#{$i}){animation-delay:#{$i/10}s; }} }}

Aquí verá que con SCSS podemos recorrer cada selector: nth-of-type, luego aplicar un retardo de animación basado en el valor numérico de cada elemento secundario., En este caso notará que dividimos nuestro tiempo para reducir cada incremento a una fracción de segundo. Si bien compensar los elementos animados puede dar emoción a la animación, demasiado retraso puede hacer que se sienta inconexo. Echa un vistazo a este CodePen a continuación.

Squigglevision

  • Autor: Adam Kuhn

los filtros SVG proporcionan una excelente manera de lograr una sensación natural y dibujada a mano y escapar de algunas de las restricciones de representación de sensación plana de CSS solo. Animarlos puede mejorar aún más el efecto.

caso en cuestión: Squigglevision., Sí, este no es un término técnico conocido por la mayoría de los animadores, pero seguramente lo has visto empleado en caricaturas. La idea es que los bordes de estos elementos animados no solo son algo irregulares y ásperos, sino que estos bordes ásperos varían rápidamente, cuadro por cuadro, haciéndolos sentir como si hubieran sido arrancados de las páginas de un cuaderno de bocetos y traídos a la vida.

para lograr este efecto, podemos incluir un SVG en nuestra página con múltiples filtros y ligeras variaciones en los niveles de turbulencia para cada uno. A continuación, configuraremos nuestra línea de tiempo de animación, llamando a cada filtro en su propio fotograma clave., Es importante jugar con las duraciones del tiempo, ya que anticipamos que la animación se sentirá ‘nerviosa’, pero no queremos que sea tan lenta como para sentirse inconexa o tan rápida como para sentirse loca.

con ese fin, es importante tener en cuenta que CSS carece de la capacidad de transición sin problemas entre los filtros SVG, ya que no hay forma de acceder a propiedades como turbulencia y escala, por lo que este tipo de animaciones siempre debe esperarse que sean entrecortadas.,

Tumbling lettering

  • Como se ve en: juego del año
  • autor: Leon brown

El juego del año de Google presenta una animación CSS lúdica en la página de inicio, con las palabras del título cayendo y chocando entre sí. Así es como se hizo.

el primer paso es definir el documento de la página web con HTML. Consiste en el contenedor de documentos HTML, que almacena una sección head y body., Mientras que la sección head se usa para cargar los recursos CSS y JavaScript externos, el body se usa para almacenar el contenido de la página.

el contenido de la página consta de tres etiquetas de título h1 que mostrarán las diferentes variaciones del efecto de animación. Si bien cualquier texto se puede insertar en estas etiquetas, su animación se define por los nombres en el atributo class. La configuración de presentación y animación para estos nombres de clase se definirá en el CSS más adelante.

a continuación, crea un nuevo archivo llamado ‘ code.js’., Queremos encontrar todos los elementos de página con la clase animate y crear una lista de matriz que represente cada palabra del texto interior. El retardo inicial de la animación también se define en este paso. El contenido de la página no está disponible hasta que la página se haya cargado completamente, por lo que este código se coloca dentro del oyente de eventos de carga de la ventana.

el contenido de palabra de los elementos de animación debe estar contenido dentro de un elemento span. Para hacer esto, el contenido HTML existente se restablece a blanco, luego se usa un bucle para hacer que la palabra en la lista de ‘palabras’ identificada sea un elemento span., Además, se aplica un estilo animationDelay, calculado en relación con el retraso inicial (especificado a continuación) y la posición del índice de la palabra.

Crear un nuevo archivo llamado estilos.css. Ahora vamos a establecer las reglas de presentación que serán parte de cada elemento word en la animación, controlado por su etiqueta span. Mostrar como bloque, combinado con la alineación de texto centrada, dará como resultado que cada palabra aparezca en una línea separada alineada horizontalmente al centro de su contenedor. El posicionamiento relativo se utilizará para animar en relación con su posición de flujo de texto.,

.animate span{display: block;position: relative;text-align: center;}

Los elementos de animación que tienen la clase hacia atrás y hacia adelante tienen una animación específica aplicada a ellos. Este paso define la animación que se aplicará a los elementos span cuyo contenedor principal tiene la clase animate y la clase hacia atrás o hacia adelante.

tenga en cuenta que no hay espacio entre la referencia de clase animate y la anterior, lo que significa que el elemento padre debe tener ambos.

la animación mixta se define utilizando la misma configuración utilizada para las animaciones hacia adelante y hacia atrás., En lugar de aplicar las animaciones a cada hijo del Padre, el selector n-ésimo hijo se utiliza para aplicar la configuración de animación alterna. La animación hacia atrás se aplica a cada hijo de número par, mientras que la animación hacia adelante se aplica a cada hijo de número impar.

Las animaciones que acabamos de crear están hechas con una posición inicial ‘desde’, Sin ajuste de posición vertical o rotación. La posición ‘ to ‘ es el estado final de la animación, que establece los elementos con una posición vertical ajustada y un estado de rotación., Se utilizan configuraciones de terminación ligeramente diferentes para ambas animaciones para evitar que el texto se vuelva ilegible debido a la superposición en animaciones mixtas.

Flip book

  • Autor: Adam Kuhn

cuando se anima con CSS a veces es necesario un enfoque simple muerto. Y hay pocos métodos de animación más simples que el flip book. Usando steps () como nuestra función de temporización, podemos replicar este efecto. Si bien esto puede sonar entrecortado y contradecir directamente nuestra misión de mantener la fluidez,con el ritmo adecuado puede sentirse igual de orgánico.

Entonces, ¿cómo funciona?, Definimos nuestra función de facilitación de animación con solo unos pocos parámetros adicionales, indicándole a nuestra animación cuántos pasos se necesitan y en qué punto durante el primer paso nos gustaría comenzar (inicio, final), con un aspecto un poco como este, por ejemplo, pasos (10, Inicio).

dentro de nuestros fotogramas clave, ahora podemos designar un punto final para nuestra animación: para este ejemplo supongamos que nuestra animación dura 10 segundos y estamos usando 10 pasos. En este caso, cada paso tendrá un segundo de duración, moviéndose inmediatamente al siguiente fotograma de un segundo sin transición entre ellos.,

de nuevo, esto parece ir en contra de la fluidez, pero aquí es donde las animaciones escalonadas realmente pueden brillar. Podemos iterar de forma incremental a través de una hoja de sprite y animar fotograma a fotograma al igual que un flip book. Al definir fotogramas de igual tamaño pero compilarlos en una sola imagen horizontal (o vertical), podemos establecer esta imagen como un fondo de elemento y definir una posición de fondo de píxel o porcentaje como punto final de nuestra animación, permitiendo un solo paso para cada fotograma., La hoja de sprite se desplazará y llenará el elemento fotograma a fotograma con una nueva imagen de fondo basada en su posición.

echemos un vistazo a un ejemplo. En este caso, algunos conjuntos de patas animadas se adjuntan a algunos caracteres de texto. En primer lugar, vamos a definir nuestro nombre de animación, duración, recuento de pasos, posición de inicio y recuento de iteración: 

animation:runner 0.75s steps(32, end) infinite;

de nuevo, tenga en cuenta que la duración es relativamente rápida en menos de un segundo completo para 32 fotogramas totales., A continuación, definiremos nuestros fotogramas clave: 

@keyframes runner{ from{ background-position:0px 50%;} to{ background-position:-1280px 50%; }}

tenga en cuenta que el posicionamiento vertical de la imagen es consistente en todo, lo que nos dice que los sprites están extendidos horizontalmente a través de la imagen, que es 1280px en ancho total. Como hemos definido 32 fotogramas totales para esa imagen, podemos deducir que cada fotograma debe tener 40px de ancho. Echa un vistazo a este Codepen a continuación.

Es importante tener en cuenta que una hoja de sprite grande puede ser potencialmente un obstáculo grave para el rendimiento, así que asegúrese de dimensionar y comprimir las imágenes., Con una hoja de sprite bien diseñada y una duración de animación adecuada, ahora tiene una animación suave capaz de transmitir movimientos complejos.

Blowing bubbles

  • Como se ve en: 7UP
  • ver el código
  • autor: Steven Roberts

la animación de burbujas CSS que se presenta en 7UP es un hermoso ejemplo de llevar un tema de marca al diseño del sitio web. La animación consta de unos pocos elementos: el ‘dibujo’ SVG de las burbujas y luego dos animaciones aplicadas a cada burbuja.,

la primera animación cambia la opacidad de la burbuja y la mueve verticalmente en el cuadro de vista; la segunda crea el efecto de bamboleo para mayor realismo. Las compensaciones se manejan apuntando a cada burbuja y aplicando una duración y demora de animación diferentes.

para crear nuestras burbujas usaremos SVG. En nuestro SVG creamos dos capas de burbujas: una para las burbujas más grandes y otra para las burbujas más pequeñas. Dentro del SVG colocamos todas nuestras burbujas en la parte inferior del cuadro de vista.,

para aplicar dos animaciones separadas a nuestros SVGs, ambos utilizando la propiedad transform, necesitamos aplicar las animaciones a elementos separados. El elemento <g> en SVG se puede usar como un div en HTML; necesitamos envolver cada una de nuestras burbujas (que ya están en un grupo) en una etiqueta de grupo.

<g> <g transform="translate(10 940)"> <circle cx="35" cy="35" r="35"/> </g></g>

CSS tiene un potente motor de animación y un código realmente simple para producir animaciones complejas., Comenzaremos moviendo las burbujas por la pantalla y cambiando su opacidad para que entren y salgan al principio y al final de la animación.

@keyframes up { 0% { opacity: 0; } 10%, 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-1024px); }}

para crear un efecto de bamboleo, simplemente necesitamos mover (o traducir) la burbuja a la izquierda y a la derecha, por la cantidad justa: demasiado hará que la animación se vea demasiado jaunting y desconectada, mientras que muy poco pasará desapercibido. La experimentación es clave cuando se trabaja con animación.,

@keyframes wobble { 33% { transform: translateX(-50px); } 66% { transform: translateX(50px); } }

para aplicar la animación a nuestras burbujas, usaremos los grupos que usamos anteriormente y la ayuda de nth-of-type para identificar cada grupo de burbujas individualmente. Comenzamos aplicando un valor de opacidad a las burbujas y la propiedad will-change para utilizar la aceleración de hardware.

.bubbles-large > g { opacity: 0;will-change: transform, opacity;}.bubbles-large g:nth-of-type(1) {...}....bubbles-small g:nth-of-type(10) {...}

queremos mantener todos los tiempos de animación y retrasos dentro de un par de segundos el uno del otro y establecerlos para que se repitan infinitamente. Por último, aplicamos la función de sincronización ease-in-out a nuestra animación de oscilación para que se Vea un poco más natural.,

ratón de desplazamiento

  • Como se ve en: Baltic Training
  • ver el código
  • autor: Steven Roberts

una sutil animación de ratón de desplazamiento puede dar dirección al usuario cuando aterriza por primera vez en un sitio web. Aunque esto se puede lograr usando elementos y propiedades HTML, vamos a usar SVG ya que es más adecuado para dibujar.

dentro de nuestro SVG necesitamos un rectángulo con esquinas redondeadas y un círculo para el elemento que vamos a animar, usando SVG podemos escalar el icono a cualquier tamaño que necesitemos.,

ahora que hemos creado nuestro SVG, necesitamos aplicar algunos estilos simples para controlar el tamaño y la posición del icono dentro de nuestro contenedor. Hemos envuelto un enlace alrededor del SVG del ratón y lo colocamos en la parte inferior de la pantalla.

.scroll-link { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);}.mouse { max-width: 2.5rem; width: 100%; height: auto;}

a continuación crearemos nuestra animación. En 0 y 20 por ciento del camino a través de nuestra animación, queremos establecer el estado de nuestro elemento a medida que comienza. Al establecerlo en el 20% del camino, permanecerá inmóvil durante parte del tiempo cuando se repita infinitamente.,

@keyframes scroll { 0%, 20% { transform: translateY(0) scaleY(1); }}

necesitamos agregar el punto de inicio de opacidad y luego transformar tanto la posición y como la escala vertical en la marca del 100%, al final de nuestra animación. Lo último que tenemos que hacer es soltar la opacidad con el fin de desvanecer nuestro círculo.

@keyframes scroll { ... 10% { opacity: 1; } 100% { transform: translateY(36px) scaleY(2); opacity: 0.01; }}

finalmente aplicamos la animación al círculo, junto con la propiedad’ transform-origin ‘ y la propiedad will-change para permitir la aceleración de hardware. Las propiedades de animación son bastante autoexplicativas., La función de temporización cubic-bezier se utiliza para tirar primero del círculo hacia atrás antes de dejarlo caer en la parte inferior de nuestra forma de ratón; esto agrega una sensación lúdica a la animación.,

Animado a escribir

haga Clic para ver la animación en acción
  • Como se ve en: Jardín Ocho
  • Ver el código de los caminos y de texto
  • Autor: Steven Roberts

El Jardín de Ocho sitio web utiliza una animación común, técnica en la cual aparece el texto se escribirá. Para lograr el efecto, recurrimos a SVG. Para empezar, crearemos el SVG., Hay dos enfoques aquí: convertir el texto en rutas para animarlas o usar texto SVG. Ambos enfoques tienen sus pros y sus contras.

comience creando nuestra animación de fotogramas clave. La única función que necesitamos para realizar es cambiar el stroke-dashoffset. Ahora que hemos creado nuestra animación, necesitamos aplicar los valores desde los que queremos animar. Establecemos el trazo-dasharray, que creará espacios en el trazo. Queremos establecer nuestro trazo para que sea un valor lo suficientemente grande como para cubrir todo el elemento, finalmente compensando el guion por la longitud del trazo.,

la magia ocurre cuando aplicamos nuestra animación. Al animar el desplazamiento, estamos poniendo el trazo a la vista, creando un efecto de dibujo. Queremos que los elementos dibujen uno a la vez, con cierta superposición entre el final de dibujar un elemento y comenzar a dibujar el siguiente. Para lograr esto recurrimos a Sass/SCSS y nth-of-type para retrasar cada letra A la mitad de la longitud de la animación, multiplicada por la posición de esa letra en particular.,

aves voladoras

  • Como se ve en: Fournier Père et Fils
  • ver el código para un solo pájaro o toda la bandada
  • autor: Steven Roberts

comenzamos con líneas vectoriales completamente rectas, dibujando cada fotograma de nuestra animación, representando al pájaro en un estado de vuelo diferente. Luego manipulamos los puntos vectoriales y redondeamos las líneas y los bordes. Finalmente, colocamos cada Marco en una caja del mismo tamaño y los colocamos uno al lado del otro. Exporte el archivo como SVG.

la configuración de HTML es muy simple., Solo necesitamos envolver cada pájaro en un contenedor para aplicar múltiples animaciones, una para hacer volar al pájaro y la otra para moverlo por la pantalla.

<div class="bird-container"> <div class="bird"></div></div>

aplicamos nuestro bird SVG como fondo a nuestro Bird div y elegimos el tamaño que queremos que tenga cada fotograma. Usamos el ancho para calcular aproximadamente la nueva posición del fondo. El SVG tiene 10 celdas, por lo que multiplicamos nuestro ancho por 10 y luego alteramos el número ligeramente hasta que parezca correcto.

la animación CSS tiene un par de trucos que puede que no conozcas., Podemos usar la función animation-timing-para mostrar la imagen en pasos, como pasar por las páginas de un cuaderno para aludir a la animación.

ahora que hemos creado nuestro ciclo de mosca, nuestra ave está agitando sus alas, pero no va a ninguna parte. Con el fin de moverla a través de la pantalla, creamos otra animación de fotogramas clave. Esta animación moverá el pájaro a través de la pantalla horizontalmente mientras también cambia la posición vertical y la escala para permitir que el pájaro serpentee a través de forma más realista.

una vez que hemos creado nuestras animaciones, simplemente tenemos que aplicarlas., Podemos crear múltiples copias de nuestro pájaro y aplicar diferentes tiempos de animación y retrasos. 

.bird--one { animation-duration: 1s; animation-delay: -0.5s;}.bird--two { animation-duration: 0.9s; animation-delay: -0.75s;}

Cross my hamburger

  • Como se ve en: Better Brand Agency
  • ver el código para los tramos y SVG
  • autor: Steven Roberts

Esta animación se utiliza en toda la web, convirtiendo tres líneas en un icono de cruz o cierre., Hasta hace poco, la mayoría de las implementaciones se han logrado utilizando elementos HTML, pero en realidad SVG es mucho más adecuado para este tipo de animación – ya no hay necesidad de inflar el código de los botones con múltiples tramos.

debido a la naturaleza animable y SVG y su DOM navegable, el código para realizar la animación o Transición cambia muy poco – la técnica es la misma.

comenzamos creando cuatro elementos, ya sea que se extienda dentro de un div o rutas dentro de un SVG., Si estamos usando spans, necesitamos usar CSS para posicionarlos dentro del div; si estamos usando SVG, esto ya está solucionado. Queremos posicionar las líneas 2 y 3 en el centro, una encima de Otra, mientras espaciamos las líneas 1 y 4 uniformemente por encima y por debajo, asegurándonos de centrar el origen de la transformación.

vamos a confiar en la transición de dos propiedades: opacidad y rotación. En primer lugar, queremos desvanecer las líneas 1 y 4, que podemos apuntar usando el selector :nth-child.,

.menu-icon.is-active {element-type}:nth-child(1),.menu-icon.is-active {element-type}:nth-child(4) { opacity: 0; }

lo único que queda por hacer es apuntar a las dos líneas intermedias y girarlas 45 grados en direcciones opuestas.

persiguiendo círculos

  • Como se ve en: Better Brand Agency
  • ver el código
  • autor: Steven Roberts

el icono de carga animado se compone de cuatro círculos. Los círculos no tienen relleno, pero tienen colores de trazo alternos.

en nuestro CSS, podemos establecer algunas propiedades básicas para todos nuestros círculos y luego usar el selector :nth-of-type para aplicar un trazo-dasharray diferente a cada círculo.,

a continuación, necesitamos crear nuestra animación de fotogramas clave. Nuestra animación es muy simple: todo lo que tenemos que hacer es girar el círculo en 360 grados. Al colocar nuestra transformación en la marca del 50% de la animación, el círculo también girará de nuevo a su posición original.

@keyframes preloader { 50% { transform: rotate(360deg); } }

con nuestra animación creada, ahora solo necesitamos aplicarla a nuestros círculos. Establecemos el nombre de la animación; duración; recuento de iteración y función de temporización. El ‘ease-in-out’ le dará a la animación una sensación más lúdica.,

por el momento, tenemos nuestro cargador, pero todos los elementos están girando juntos al mismo tiempo. Para arreglar esto, aplicaremos algunos retrasos. Crearemos nuestros retrasos usando un bucle Sass for.

@for $i from 1 through 4 { &:nth-of-type(#{$i}) { animation-delay: #{$i * 0.15}s;} }

debido a los retrasos, nuestro círculo ahora se anima a su vez, creando la ilusión de que los círculos se persiguen entre sí. El único problema con esto es que cuando la página se carga por primera vez, los círculos son estáticos, luego comienzan a moverse, uno a la vez. Podemos lograr el mismo efecto de desplazamiento, pero detener la pausa no deseada en nuestra animación simplemente estableciendo los retrasos en un valor negativo.,

animation-delay: -#{$i * 0.15}s;

Next page: More CSS animation examples to explore