usado bem, a animação CSS é uma ferramenta incrivelmente útil e poderosa. Ele pode adicionar interesse ou excitação criativa, dirigir o olho do Usuário, explicar algo rápida e sucintamente, e melhorar a usabilidade. Por essa razão, os últimos anos têm visto mais e mais animação em sites e em app.

neste artigo, reunimos alguns dos exemplos de animação CSS mais fixes que vimos, e mostramos-lhe como recriá-los., Leia mais para uma gama de tutoriais em profundidade e efeitos inspiradores (e links para o seu código) para explorar.

o que é a animação CSS?

CSS animation é um método de animação de certos elementos HTML sem ter que usar o processador e memória fome JavaScript ou Flash. Não há limite para o número ou frequência de propriedades CSS que podem ser alteradas. As animações CSS são iniciadas especificando os keyframes para a animação: estes keyframes contêm os estilos que o elemento terá.,

embora possa parecer limitado quando se trata de animação, o CSS é realmente uma ferramenta muito poderosa e é capaz de produzir animações de 60fps maravilhosamente suaves. “Entregar animações pensativas e fluidas que contribuem com profundidade significativa para o seu site não tem que ser difícil”, diz O desenvolvedor da front end da web Adam Kuhn. “As propriedades CSS modernas agora lhe dão quase todas as ferramentas que você vai precisar para criar experiências memoráveis para seus usuários.,”

As melhores animações ainda têm suas raízes nos clássicos 12 princípios de animação da Disney-você verá várias menções disso ao longo destes exemplos de animação CSS, então vale a pena verificar esse artigo antes de começar. Você também pode querer explorar o nosso roundup de grandes vídeos de música animada para mais exemplos e inspiração.

A regra de ouro é que suas animações CSS não deve ser exagerada, mesmo um pequeno movimento pode ter um grande impacto, e muito pode ser perturbador e irritante para os usuários., Aqui estão os nossos exemplos favoritos e como recriá-los.

efeito divertido do rato

  • Autor: Donovan Hutchinson

Este é um efeito divertido que segue o seu rato ao redor. Pode ser útil quando você quer chamar a atenção para um elemento em sua página.

precisamos de muito pouco de HTML para este efeito:

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

Primeiro, podemos posicionar o demo e defina perspectiva para a nossa transformação 3D:

em Seguida, o estilo div queremos animar:

Aqui vamos definir um plano de fundo e, em seguida, vamos definir um estouro de oculto, de modo que podemos adicionar um efeito de brilho mais tarde., Também definimos variáveis css, sheenX e sheenY.

estas variáveis de brilho ajudarão a posicionar o efeito de brilho. Nós os usamos no pseudo-elemento do nosso cartão:

aqui estamos certificando-nos de que o pseudo-elemento é maior do que o recipiente. Isto nos dará algo para deslizar em torno do topo do cartão usando Transformer.

a propriedade transformar está fazendo uso das variáveis CSS que definimos anteriormente. Vamos colocá-los com JavaScript. Vamos configurar o JavaScript para ouvir primeiro os Eventos do rato:

documento.,onmousemove = handleMouseMove;

We now need a handleMouseMove function to handle onmousemove:

Our function takes the window height and width and creates an angle on the X and Y Machines. Em seguida, ajustamos estes para o estilo de transformação de nosso cartão. Isto dá ao cartão um ângulo baseado no mouse!

a seguir chamamos uma função para definir a posição do pseudo-elemento:

o nosso pseudo-elemento fica melhor quando se move na direcção oposta ao rato. Para isso, criamos um número entre -0,5 e 0,5 que muda na direção oposta, calculando a razão em -1.,

multiplicamos este número por 800 à medida que queremos que ele aumente para um máximo de 400px, que é o quão longe definimos o pseudo-elemento sheen fora do cartão.

Por último, definimos estes valores de compensação para as nossas propriedades variáveis CSS, e o renderizador do navegador faz o resto.

Agora temos uma carta que vira para o nosso mouse enquanto o efeito sheen se move na direção oposta em cima. Isto cria um efeito agradável e atraente.,

A grande revelação

  • Autor: Adão Kuhn

conteúdo Animado revelar efeitos parecem ser muito popular agora, e usados corretamente, eles podem capturar o foco do usuário e envolver o seu público. Você já viu isso antes: um bloco de cor cresce de um lado ou de outro horizontalmente ou verticalmente, e então recua para o lado oposto, desta vez revelando algum texto ou uma imagem abaixo. É um conceito que pode parecer complicado, mas realmente depende de apenas algumas coisas.,

Primeiro, vamos configurar o nosso posicionamento do elemento (baixe o código completo aqui) – defini-lo como relativo (apenas estática falhará neste caso). Em casos de texto é melhor permitir a altura e largura automáticas, embora um pouco de enchimento não dói. Também definiremos uma origem transformada, no caso do elemento pai que queremos usar a posição inicial. Uma vez que queremos o elemento escondido inicialmente, vamos usar uma transformação de escala ao longo do eixo apropriado para encolhê-lo.

A seguir, um pseudo elemento para mascarar o nosso Pai, configurando a origem da transformação para a opção oposta., Finalmente, juntar as animações, usando as funções de tempo ou atrasos para compensar cada um.

nota, nós compensamos as animações do Pai e do pseudo elemento com um atraso dizendo à caixa que esconde o nosso texto para revelá-lo apenas depois do elemento em si ter completamente dimensionado para a vista. Vê o Codepen lá em baixo.

Escalonar no

  • Autor: Adão Kuhn

uma Vez que você começou a acumular uma boa biblioteca de vários trechos de flexibilização, é hora de olhar para outras formas de aumentar a profundidade de suas animações, e uma das melhores maneiras de compensar seus elementos animados.,

é muito comum que um trigger JavaScript é definido para iniciar um monte de animações com base na posição de deslocamento, apenas para encontrar todos os itens que se movem efetivamente em conjunto. Felizmente, o próprio CSS oferece uma propriedade simples que pode fazer (ou quebrar) a sua experiência animada: animação-atraso.

digamos, por exemplo, que temos uma grade de imagens que queremos animar em frame quando o Usuário se desloca. Há uma série de formas de activar isto, provavelmente adicionando classes aos elementos à medida que entram na área de visualização., Isto pode ser um elevador bastante pesado no navegador, no entanto, e pode ser evitado simplesmente adicionando uma única classe a um elemento de contêiner e definindo atrasos de animação em elementos filhos.

Este é um caso de uso particularmente bom para pré-processadores como SCSS ou menos, o que nos permite usar um @para laço para iterar atravé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; }} }}

Aqui você verá com SCSS que somos capazes de fazer um loop através de cada :n-é-o-tipo selector, em seguida, aplicar um atraso de animação com base no valor numérico de cada elemento-criança., Neste caso, você vai notar que dividimos nosso tempo para reduzir cada incremento a uma fração de segundo. Ao compensar os seus elementos animados pode dar emoção à sua animação, muito atraso pode fazê-lo sentir desarticulado. Vejam este CodePen lá em baixo.

Squigglevision

  • autor: Adam Kuhn

SVG filtros fornecem uma ótima maneira de alcançar uma sensação natural, desenhada à mão e escapar de algumas das restrições de renderização de sensação plana do CSS sozinho. Animá-los pode aumentar ainda mais o efeito.

Caso no ponto: Squigglevision., Sim, este não é um termo técnico conhecido pela maioria dos animadores, mas você certamente o viu empregado em desenhos animados. A ideia é que as bordas desses elementos animados não são apenas um pouco irregulares e toscos, mas estas arestas rapidamente variada, quadro por quadro, fazendo-os sentir como se eles tivessem sido arrancadas das páginas de um caderno de esboços e trouxe para a vida.

para atingir este efeito, podemos incluir um SVG na nossa página com vários filtros e Pequenas variações nos níveis de turbulência para cada um. A seguir, vamos definir a nossa linha temporal de animação, chamando cada filtro no seu próprio servidor de chaves., É importante brincar com as durações de tempo à medida que antecipamos que a animação vai se sentir ‘nervosa’, mas não quero que seja tão lento a ponto de se sentir desarticulado ou tão rápido a ponto de se sentir louco.

para esse fim, é importante notar que o CSS não tem a capacidade de transição suave entre filtros SVG, uma vez que não há maneira de acessar propriedades como turbulência e escala, de modo que estes tipos de animações devem ser sempre esperadas para ser agitado.,

Caindo letras

  • Como visto em: Jogo do Ano
  • Autor: Leon marrom

o Google é o Jogo do Ano apresenta um brincalhão CSS animação na página inicial, com o título palavras caindo e batendo uma na outra. Foi assim que se fez.

o primeiro passo é definir o documento da página web com HTML. Consiste no container do documento HTML, que armazena uma seção da cabeça e do corpo., Enquanto a seção cabeça é usada para carregar os recursos externos DE css e JavaScript, o corpo é usado para armazenar o conteúdo da página.

o conteúdo da página consiste em três marcas de título h1 que irão mostrar as diferentes variações do efeito de animação. Enquanto qualquer texto pode ser inserido nessas tags, sua animação é definida pelos nomes no atributo class. As configurações de apresentação e animação para estes nomes de classe serão definidas no CSS mais tarde.

a seguir, crie um novo ficheiro chamado ‘ code.js’., Queremos encontrar todos os elementos de página com a classe animada e criar uma lista de array representando cada palavra do texto interno. O atraso de animação inicial também é definido nesta etapa. O conteúdo da página não está disponível até que a página tenha sido completamente carregada, então este código está sendo colocado dentro do ouvinte de eventos de carga da janela.

o conteúdo da palavra dos itens de animação precisa ser contido dentro de um elemento de calibração. Para fazer isso, o conteúdo HTML existente é resetado em branco, em seguida, um loop é usado para fazer a palavra na lista de ‘palavras’ identificada um elemento de calibração., Adicionalmente, um estilo animationDelay é aplicado-calculado em relação ao atraso inicial (especificado abaixo) e a posição de índice da palavra.

crie um novo ficheiro chamado styles.Forum. Agora vamos definir as regras de apresentação que farão parte de cada elemento do word na animação, controlada pela sua etiqueta de calibração. O Display como bloco, combinado com o alinhamento de texto centrado, resultará em cada palavra aparecendo em uma linha separada horizontalmente alinhada ao meio de seu contêiner. Posicionamento relativo será usado para animar em relação à sua posição de fluxo de texto.,

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

Animation elements that have the backward and forward class have a specific animation applied to them. Este passo define a animação a aplicar aos elementos de calibração cujo contêiner pai tem tanto a classe animate e para trás ou para a frente.

Note como não há espaço entre a referência da classe animada e para trás, o que significa que o elemento-mãe deve ter ambos.

a animação mista é definida usando as mesmas configurações usadas para as animações para a frente e para trás., Em vez de aplicar as animações a cada filho do pai, o selector nth-child é usado para aplicar configurações de animação alternada. A animação de trás para a frente é aplicada a todos os filhos pares, enquanto a animação de frente é aplicada a todos os filhos ímpares.

As animações que acabamos de criar são feitas com uma posição inicial “a partir de”, sem posição vertical ou ajuste de rotação. A posição “para” é o estado final da animação, que define os elementos com uma posição vertical ajustada e estado de rotação., Configurações de final ligeiramente diferentes são usadas para ambas as animações para evitar que o texto se torne ilegível devido à sobreposição de animações mistas.

Flip book

  • autor: Adam Kuhn

quando se anima com CSS por vezes é necessária uma abordagem simples morta. E há poucos métodos de animação mais simples do que o livro flip. Usando passos () como nossa função de tempo, somos capazes de replicar este efeito. Enquanto isso pode parecer agitado e diretamente contradizer nossa missão de manter a fluidez, com o ritmo certo ele pode sentir tão perfeitamente orgânico.como funciona?, Definimos a nossa função de suavização da animação com apenas alguns parâmetros adicionais-dizendo à nossa animação quantos passos são necessários e em que ponto durante o primeiro passo gostaríamos de começar (início, fim) – parecendo um pouco assim, por exemplo passos (10, Início).

dentro dos nossos keyframes, podemos agora designar um ponto final para a nossa animação: por exemplo, vamos assumir que a nossa animação tem 10 segundos de duração e estamos a usar 10 passos. Neste caso, cada passo será de um segundo de comprimento, movendo-se imediatamente para o seguinte quadro de um segundo sem transição entre.,mais uma vez, isto parece voar em face da fluidez, mas aqui é onde animações em Passo de passo podem realmente brilhar. Nós podemos incrementalmente iterate através de uma folha de sprite e animar frame-by-frame assim como um livro de flip. Ao definir quadros de tamanho igual, mas compilá-los em uma única imagem horizontal (ou vertical), podemos definir esta imagem como um fundo elemento e definir uma posição de fundo pixel ou percentual como um ponto final para a nossa animação, permitindo um único passo para cada quadro., A folha de imagem irá então mudar e povoar o elemento frame por frame com uma imagem de fundo fresca com base em sua posição.

vamos dar uma olhada em um exemplo. Neste caso, alguns conjuntos de pernas animadas anexados a alguns caracteres de texto. Primeiro, vamos definir o nome da nossa animação, duração, Contagem de etapas, posição de início e contagem de iteração: 

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

novamente, note que a duração é relativamente rápida em menos de um segundo completo para 32 quadros totais., Em seguida, vamos definir os nossos nomes de chaves: 

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

Note que o posicionamento vertical da imagem é consistente ao longo de todo, o que nos diz que as imagens são horizontalmente esticadas ao longo da imagem, que é 1280px em largura total. Como definimos 32 quadros totais para essa imagem, podemos deduzir que cada quadro deve ter 40px de largura. Vejam este Codepen lá em baixo.

é importante notar que uma grande folha de sprite pode potencialmente ser um forte arrasto no desempenho, por isso certifique-se de tamanho e comprimir imagens., Com uma folha de sprite bem trabalhada e uma duração de animação apropriada você agora tem uma animação suave capaz de transmitir movimentos complexos.

Soprando bolhas

  • Como visto em: 7UP
  • Ver o código
  • Autor: Steven Roberts

O CSS bolha de animação que dispõe sobre a 7UP é um belo exemplo da execução de um tema da marca através do design do site. A animação consiste em alguns elementos: o SVG ‘desenho’ das bolhas e, em seguida, duas animações aplicadas a cada bolha.,

a primeira animação altera a opacidade da bolha e move-a verticalmente na janela; a segunda cria o efeito de oscilação para o realismo adicionado. As contrapartidas são manipuladas visando cada bolha e aplicando uma duração de animação e atraso diferentes.

a fim de criar as nossas bolhas, estaremos usando SVG. Em nosso SVG criamos duas camadas de bolhas: uma para as bolhas maiores e outra para as bolhas menores. Dentro do SVG posicionamos todas as nossas bolhas no fundo da caixa de visualização.,

A fim de aplicar duas animações separadas para os nossos SVGs, ambos utilizando a propriedade transformar, precisamos aplicar as animações a elementos separados. <g> elemento SVG pode ser usado tanto como um div, no HTML; precisamos enrole cada uma de nossas bolhas (que já estão em um grupo) em um tag de grupo.

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

CSS tem um motor de animação poderoso e um código realmente simples, a fim de produzir animações complexas., Vamos começar com mover as bolhas para cima da tela e mudar a sua opacidade, a fim de apagá-las no início e no fim da animação.

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

para criar um balançar efeito, nós simplesmente precisamos mover (ou traduzir) a bolha para a esquerda e para a direita, apenas o direito quantidade – muito fará com que a animação parece muito excursional e desligada, enquanto muito pouco vai principalmente despercebido. A experimentação é fundamental quando se trabalha com animação.,

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

a fim de aplicar a animação às nossas bolhas, vamos usar os grupos que usamos anteriormente e a ajuda do nth-of-type para identificar cada grupo de bolhas individualmente. Começamos por aplicar um valor de opacidade nas bolhas e na propriedade will-change, a fim de utilizar a aceleração 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) {...}

we want to keep all the animation times and delays within a par of seconds of E set them to repeat infinitamente. Por último, aplicamos a função de tempo de entrada fácil para a nossa animação oscilante para que pareça um pouco mais natural.,

rato rolante

  • conforme visto em: treino Báltico
  • Ver o código
  • autor: Steven Roberts

uma animação subtil do rato pode dar a direcção ao utilizador quando este aterrar pela primeira vez num sítio Web. Embora isso possa ser realizado usando elementos HTML e propriedades, nós vamos usar SVG como este é mais adequado para o desenho.

dentro do nosso SVG precisamos de um rectângulo com cantos arredondados e um círculo para o elemento que vamos animar, usando SVG podemos dimensionar o ícone para qualquer tamanho que precisemos.,

Agora que criamos o nosso SVG, precisamos aplicar alguns estilos simples, a fim de controlar o tamanho e posição do ícone dentro do nosso recipiente. Nós enrolamos um link em torno do rato SVG e posicionamo-lo na parte inferior da tela.

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

a seguir vamos criar a nossa animação. Em 0 e 20 por cento do caminho através de nossa animação, queremos definir o estado do nosso elemento como ele começa. Ao ajustá-lo para 20% do caminho, ele vai ficar quieto por parte do tempo quando repetido infinitamente.,

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

precisamos adicionar no ponto de início da opacidade e, em seguida, transformar tanto a posição Y e a escala vertical na marca de 100%, o fim da nossa animação. A última coisa que temos de fazer é desistir da opacidade para acabar com o nosso círculo.

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

por último, aplicamos a animação ao círculo, juntamente com a propriedade “transformar-origem” e a propriedade “will-change” para permitir a aceleração do hardware. As propriedades da animação são bastante auto-explicativas., A função de tempo cúbico-bezier é usada para primeiro puxar o círculo para trás antes de o largar para o fundo da forma do rato; isto adiciona uma sensação lúdica à animação.,

Animação de escrita

Clique para ver a animação em acção
  • Como visto em: Jardim de Oito
  • Ver o código para os caminhos e texto
  • Autor: Steven Roberts

O Jardim de Oito website usa uma animação comuns técnica através da qual o texto aparece para ser escrito. Para alcançar o efeito, passamos à SVG. Para começar, vamos criar o SVG., Existem duas abordagens aqui: converter o texto para caminhos, a fim de animá-los ou usar o texto SVG. Ambas as abordagens têm os seus prós e contras.

comece por criar a nossa animação em servidor de chaves. A única função que precisamos que ele execute é mudar o stroke-dashoffset. Agora que criamos nossa animação, precisamos aplicar os valores que queremos animar. Nós ajustamos o stroke-dasharray, que irá criar lacunas no stroke. Queremos definir o nosso traço para ser um valor grande o suficiente para cobrir todo o elemento, finalmente compensando o traço pelo comprimento do traço.,a magia acontece quando aplicamos a nossa animação. Ao animar o offset, estamos a mostrar o traço, criando um efeito de desenho. Queremos que os elementos desenhem um de cada vez, com alguma sobreposição entre o fim do desenho de um elemento e começar a desenhar o próximo. Para conseguir isso, voltamos para Sass/SCSS e nth-of-type para atrasar cada letra em metade do comprimento da animação, multiplicado pela posição dessa letra particular.,

aves voadoras

  • conforme visto em: Fournier Père et Fils
  • Ver o código de uma única ave ou de todo o bando

    • autor: Steven Roberts

começamos com linhas vectoriais completamente rectas, desenhando cada quadro da nossa animação, representando a ave num estado de voo diferente. Então manipulamos os pontos vetoriais e contornamos as linhas e bordas. Finalmente, colocamos cada moldura em uma caixa de tamanho igual e colocá-los lado a lado. Exportar o ficheiro como um SVG.

a configuração HTML é realmente simples., Nós só precisamos embrulhar cada pássaro em um recipiente, a fim de aplicar várias animações – um para fazer o pássaro voar e o outro para movê-lo através da tela.

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

aplicamos o nosso Bird SVG como fundo para o nosso bird div e escolhemos o tamanho que queremos que cada moldura seja. Usamos a largura para calcular aproximadamente a nova posição de fundo. O SVG tem 10 células, por isso multiplicamos a nossa largura por 10 e depois alteramos o número ligeiramente até parecer correcto.

CSS animation tem um par de truques que você pode não estar ciente., Nós podemos usar a animação-timing-função para mostrar a imagem em passos-muito como piscar através de páginas em um caderno para aludir à animação.agora que criamos o nosso ciclo de voo, a nossa Ave está a bater as asas, mas não vai a lado nenhum. A fim de movê-la através da tela, nós criamos outra animação keyframe. Esta animação irá mover o pássaro através da tela horizontalmente, ao mesmo tempo em que muda a posição vertical e a escala para permitir que o pássaro para meander mais realisticamente.uma vez criadas as nossas animações, precisamos simplesmente aplicá-las., Podemos criar várias cópias do nosso pássaro e aplicar diferentes tempos de animação e atrasos. 

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

Cross my hamburger

  • conforme visto em: Better Brand Agency
  • View the code for the spans and SVG
  • autor: Steven Roberts

Esta animação é usada por toda a web, transformando três linhas em um ícone cruz ou perto., Até muito recentemente, a maioria das implementações foram conseguidas usando elementos HTML, mas na verdade SVG é muito mais adequado para este tipo de animação – não há mais a necessidade de inchar o seu código de botões com vários espaços.

devido à natureza animável e SVG e seu DOM navegável, o código para realizar a animação ou transição muda muito pouco – a técnica é a mesma.

começamos por criar quatro elementos, quer se estenda dentro de um div ou caminhos dentro de um SVG., Se estamos usando spans, precisamos usar CSS para posicioná-los dentro do div; se estamos usando SVG, isso já está resolvido. Queremos posicionar as linhas 2 e 3 no centro – uma em cima da outra – enquanto as linhas de espaçamento 1 e 4 uniformemente acima e abaixo, certificando-se de centralizar a origem da transformação.

vamos confiar na transição de duas propriedades: opacidade e rotação. Em primeiro lugar, queremos eliminar as linhas 1 e 4, que podemos atingir usando o selector :nth-child.,

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

a única coisa a fazer é acertar as duas linhas médias e rodá-las 45 graus em direções opostas.

Perseguindo círculos

  • Como visto em: Melhor Marca da Agência
  • Ver o código
  • Autor: Steven Roberts

animação de carregamento ícone é composta por quatro círculos. Os círculos não têm enchimento,mas têm cores alternadas.

em nosso CSS, podemos definir algumas propriedades básicas para todos os nossos círculos e então usar o :nth-of-type selector para aplicar um curso-dasharray diferente para cada círculo.,

A seguir, precisamos criar a nossa animação em servidor de chaves. Nossa animação é muito simples: tudo o que precisamos fazer é rodar o círculo em 360 graus. Ao colocar a nossa transformação na marca de 50% da animação, o círculo também irá rodar de volta para a sua posição original.

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

com a nossa animação criada, agora só precisamos aplicá-la aos nossos círculos. Definimos o nome da animação; duração; Contagem de iterações e função de tempo. O “ease-in-out” dará à animação uma sensação mais lúdica.,

no momento, temos nosso carregador, mas todos os elementos estão girando juntos ao mesmo tempo. Para resolver isto, vamos aplicar alguns atrasos. Vamos criar os nossos atrasos usando um laço Sass.

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

devido aos atrasos, o nosso círculo agora anima por sua vez, criando a ilusão dos círculos que se perseguem uns aos outros. O único problema com isso é que quando a página carrega pela primeira vez, os círculos são estáticos, então eles começam a se mover, um de cada vez. Podemos alcançar o mesmo efeito de compensação, mas parar a pausa indesejada em nossa animação simplesmente ajustando os atrasos para um valor negativo.,

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

Next page: More CSS animation examples to explore