Guia de animação CSS para desenvolvedores de JavaScript

Está bem documentado que o cérebro humano está programado para o movimento. Os humanos são mais propensos a prestar atenção em como os elementos se movem, em vez de se concentrar em elementos estáticos.

As animações CSS tiram proveito desse comportamento humano. Quando a animação é adicionada a um site, ela chama a atenção do usuário para áreas importantes de um produto, criando um efeito duradouro e geralmente melhorando a experiência.

Nesta postagem, revisaremos os benefícios das animações CSS, diferentes propriedades de animação CSS e diferentes exemplos em que os desenvolvedores de JavaScript podem usar animações CSS para tornar os sites mais interativos e fáceis de usar.

Cada um desses exemplos será acompanhado por uma demonstração do Codepen e uma explicação detalhada para tornar os exemplos mais realistas, práticos e informativos.

Uma visão geral das animações CSS

Antes de nos aprofundarmos na compreensão de como usar animação CSS como desenvolvedor JavaScript, vamos revisar rapidamente o que exatamente é animação CSS, por que você precisa saber e qual impacto ela tem na aparência de um site.

O que são animações CSS?

Como o nome indica, animação CSS permite aos usuários animar algumas propriedades CSS por seguindo um padrão declarativo onde os usuários podem especificar quais mudanças na propriedade CSS durante um período de tempo.

As animações CSS permitem animar as transições de uma configuração de estilo CSS para outra.

Por que você deve entender animações CSS

O ecossistema de desenvolvimento da web atingiu um ponto em que os desenvolvedores de JavaScript não podem evitar compreender e animar CSS . Uma interface de usuário sem animação é como um videogame sem movimento, e ninguém gosta mais de jogos somente de texto!

A necessidade de construir sites mais interativos é respondida com animações CSS.

Qual é o impacto positivo das animações CSS em sites?

Você já olhou para um site e se perguntou se a página estava carregando ou quebrada? Essa experiência comum pode causar frustração para os usuários que a encontram.

Usando animações CSS, os desenvolvedores podem mitigar essa frustração adicionando uma animação de carregamento que sinaliza ao usuário que algo está acontecendo, mantendo-o na página por mais tempo.

Quando bem feitas, as animações podem adicionar interação valiosa, personalidade e uma experiência de usuário atraente às interfaces do site.

As animações podem fazer com que os elementos da IU se assemelhem ao mundo real, fazendo com que mudem suavemente enquanto dão a sensação de continuidade, ação e progresso em vez de mudar em um piscar de olhos.- Patrícia Silva, “How to Make CSS Animations”

Animações CSS explicadas

As animações consistem em dois componentes: um estilo que descreve a animação CSS e frames-chave que indicam a sequência do estilo da animação.

Vamos dividir esses dois componentes para entendê-los de forma eficaz.

Estilos que descrevem animações CSS

Para cada animação que você cria, você deve descrever as características da animação. Isso lhe dá controle total sobre a decisão exata do que a animação pode ou não fazer.

Alguns exemplos de propriedades que você pode configurar incluem a duração, a direção e o número de vezes que a animação se repete.

Para descrever a animação, você pode usar a propriedade abreviada animation ou as subpropriedades animation .

Animação propriedade abreviada

A propriedade abreviada animation é uma abreviação para as oito subpropriedades animation . Isso evita que você perca tempo digitando os nomes das subpropriedades e anima os elementos que exigem todas as oito subpropriedades:

/* Aqui está a sintaxe da propriedade abreviada da animação */
.elemento { animação: nome duração função temporização atraso iteração contagem direção preenchimento modo estado de reprodução;
}

Quando você aplica este código a um elemento, a propriedade abreviada animação anima o elemento na página com todas as oito subpropriedades:

Ver a caneta
Propriedade abreviada de animação-Tutorial de animação CSS de Didicodes ( @edyasikpo )
em CodePen .

Animação subpropriedades

As oito subpropriedades constituem a propriedade abreviada de animação real e configuram a animação do elemento em CSS. É útil quando você não deseja usar todas as subpropriedades simultaneamente ou quando se esquece da ordem de organização na propriedade da animação:

/* Aqui está a sintaxe das subpropriedades da animação. */
.elemento { nome-da-animação: nome; animação-duração: duração; função de tempo de animação: função de tempo; animação-atraso: atraso; animação-iteração-contagem: contagem; animação-direção: direção; modo de preenchimento de animação: modo de preenchimento; estado de reprodução de animação: estado de reprodução;
}

Novamente, quando você aplica o código ao elemento, ele renderiza um quadrado animado:

Ver a caneta
Subpropriedades de animação-Tutorial de animação CSS de Didicodes ( @edyasikpo )
em CodePen .

Observe que você não pode usar a propriedade abreviada animation e as subpropriedades animation juntas porque elas produzem a mesma coisa. Eles devem ser usados ​​individualmente com base no que você está tentando alcançar.

Você pode aprender mais sobre cada subpropriedade e seu valor no MDN Web Docs .

Conforme você se move para os frames-chave, é fundamental saber que o uso de estilos para descrever uma animação CSS não pode funcionar sem os frames-chave indicando a sequência da animação.

Por exemplo, a demonstração abaixo inclui as subpropriedades animation-name , animation-duration e animation-timing-function que deve fazer o batimento cardíaco.

No entanto, você não pode ver nenhuma animação no coração porque a propriedade @keyframes na regra ainda não está configurada:

Ver a caneta
Um coração-Tutorial de animações CSS de Didicodes ( @edyasikpo )
em CodePen .

Usando @keyframe para indicar uma sequência de animação

Os quadros-chave descrevem como um elemento animado é renderizado em um determinado momento durante a sequência de animação. Como o tempo da animação é definido no estilo CSS usando a propriedade abreviada animação ou suas subpropriedades, os quadros-chave usam uma porcentagem para indicar a sequência de animação.

Para usar quadros-chave, crie uma regra @keyframes com o mesmo nome passado para a propriedade nome-da-animação . Na demonstração do heartbeat, o animation-name é heartbeat , então você deve nomear o @keyframes na regra heartbeat também.

Cada @ keyframes at-rule contém uma lista de estilos de seletores de quadro-chave, especificando porcentagens para a animação quando o quadro-chave ocorre e um bloco contendo os estilos para esse quadro-chave:

 @ keyframes heartbeat { 0% { transformar: escala (1) girar (-45deg); } 20% { transformar: escala (1,25) girar (-45deg); } 40% { transformar: escala (1,5) girar (-45deg); }
}

0% indica o primeiro momento da sequência de animação, enquanto 100% indica o estado final da animação.

Agora que você entende o @keyframes , vamos incluí-lo na demonstração central e ver se algo muda:

Veja a caneta
Heartbeat-Tutorial de animações CSS de Didicodes ( @edyasikpo )
em CodePen .

Como você pode ver, o coração está batendo agora!

Quando você adicionou um CSS @keyframes em regra para fazer o tamanho da escala de coração de 0% a 40% , você conjunto:

• 0% do tempo sem transformação
• 20% do tempo para dimensionar o coração para 125% de seu tamanho inicial por meio de scale(1.25)
• 40% do tempo para dimensionar o coração 150% de seu tamanho inicial por meio de escala(1.5)

rotate (-45deg) foi adicionado para manter a direção original do coração que você criou com CSS.

Exemplos de animação para desenvolvedores de JavaScript

Nesta seção, revisaremos dois exemplos em que os desenvolvedores de JavaScript podem usar animação CSS para tornar os sites mais interativos e melhorar a experiência do usuário.

Preenchendo um formulário

Formulários são componentes vistos em quase todos os sites. Na maioria das vezes, preencher formulários online pode ser entediante.

Neste exemplo, você verá um formulário de login e verá como controlar a animação com JavaScript pode tornar o site mais interativo para o usuário. Quando um usuário tenta adicionar seu endereço de e-mail e senha no formulário de login abaixo, não há animação aplicada ao formulário:

Ver a caneta
Formulário 1-Tutorial de animações CSS de Didicodes ( @edyasikpo )
em CodePen .

Embora ter um formulário sem animação seja totalmente aceitável, não é visualmente atraente para o usuário e provavelmente não chamará sua atenção.

Mas na página de login animada abaixo, os caracteres nos campos E-mail e Senha sobem simultaneamente quando o usuário começa a inserir suas informações:

Ver a caneta
Formulário 2-Tutorial de animações CSS de Didicodes ( @edyasikpo )
em CodePen .

Embora seja uma animação sutil, ela chama a atenção do usuário e melhora sua experiência das seguintes maneiras:

• Significa para o usuário que ele clicou em um campo de entrada
• O usuário agora está ciente de que pode começar a digitar

Isso pode criar um ambiente mais amigável, memorável e atraente.

Percorrer uma página

Quando um usuário rola por um site que não é animado, muitas vezes pode perder informações importantes.

Vamos percorrer duas páginas com uma lista de informações, uma com elementos estáticos e outra com elementos animados:

Ver a Caneta
Scroll 1-Tutorial de animação CSS de Didicodes ( @edyasikpo )
em CodePen .

Veja a caneta
Role 2-Tutorial de animação CSS de Didicodes ( @edyasikpo )
em CodePen .

Como a animação traz o conteúdo da esquerda e da direita na segunda lista, ela pode atrasar os usuários para garantir a leitura de cada opção, ao contrário da primeira página sem a animação. Também ajuda os usuários a rolar até o fim para visualizar todas as informações disponíveis para eles.

Esse, meu amigo, é o poder de adicionar animações a um site!

Precisa de inspiração para animação?

Aqui está uma lista de cinco empresas que usam animação CSS para criar uma experiência melhor para seus usuários. Se você der uma olhada nesses sites, a interação é envolvente, fazendo com que você role até o final da página ou interagindo com um dos CTAs da página:

• GitHub
• Espécies em peças
• Lava
• Netlify
• Sequoir

Claro, esses não são os únicos sites no mundo que usam animações CSS, mas esses cinco provavelmente darão a inspiração de que você precisa.

Conclusão

Em resumo, as animações CSS são as ferramentas de que você precisa para criar experiências memoráveis ​​para seus usuários como desenvolvedores de JavaScript. Você pode encontrar todas as demos CSS animadas do Codepen neste post aqui .

Se você tiver alguma dúvida, compartilhe-a na seção de comentários abaixo e responderei a todos os comentários.

A postagem Guia de animação CSS para desenvolvedores JavaScript apareceu primeiro no LogRocket Blog .