Animações CSS: Enriqueça Seu Site com Estas 17 Opções

Animações cativantes que prendem seu olhar enquanto uma página é carregada. Transições suaves que o guiam sem esforço pelo conteúdo de um site. Explosões inesperadas de cor e movimento à medida que você interage com botões em um aplicativo.

Embora sutis, esses elementos influenciam bastante a sua percepção de uma marca e sua experiência digital geral. Então, o que traz esses detalhes envolventes à vida? Muitas vezes, isso é alcançado com a ajuda de animações CSS.

Neste guia, vamos ajudá-lo a chegar lá com:

• Uma introdução ao CSS e animação CSS
• Principais razões para você experimentar animações CSS
• Os poucos obstáculos para adotar animações CSS (com soluções)
• 17 animações CSS exemplares para usar em seu app ou site
• Como começar a adicionar CSS ao seu site

Conheça o CSS

CSS é a sigla para Folhas de Estilo em Cascata.

CSS é uma linguagem de código que dita como elementos gráficos e de conteúdo em um site ou aplicativo parecem e agem. CSS é útil para personalizar cores e fontes, posicionar e espaçar elementos em uma página, e claro, criar animações. Existem animações em CSS “puro” construídas apenas a partir de HTML (Linguagem de Marcação de Hipertexto) e código CSS, e há animações CSS que incorporam outros tipos de código (como JavaScript) ou mídia existente (como GIFs).

O CSS surgiu no início dos anos 1990 e desde então evoluiu do CSS1 para o CSS2 e para o CSS3 — a versão atual e amplamente utilizada. Neste artigo, seguiremos a prática comum de usar o termo “CSS” ao nos referirmos a essa versão mais recente.

HTML é como a fundação e a estrutura de uma casa, sem a qual a casa não pode existir. Mas o CSS transforma essa casa com pintura, acabamentos e decoração que conferem estilos e funcionalidades únicos.

Blocos de Construção de Animação CSS

As animações CSS utilizam código CSS para concatenar várias propriedades e valores que fazem os elementos na tela “moverem-se”.

As propriedades CSS são as peças das animações, como fundo, raio da borda, fonte, margem, tipo de movimento (como girar ou desvanecer), etc. Os valores preenchem os detalhes em torno dessas propriedades de animação, definindo cor, alinhamento, tamanho, duração, direção, velocidade, etc.

Vamos analisar os elementos da popular regra @keyframes, que define transições CSS ao longo de uma sequência de animação, como exemplo de como propriedades e valores funcionam juntos:

• A propriedade animation-name dá o nome da animação.
• A propriedade animation-duration define a duração de uma animação. Os valores são normalmente exibidos em segundos (0s, 4s, etc.).
• A propriedade animation-delay especifica um início de animação com atraso. Seu valor também é dado em segundos (-2s, 5s, etc.).
• A propriedade animation-iteration-count indica o número de vezes que uma animação deve ser executada. O valor representa quantas vezes você deseja que a animação se repita; por exemplo, infinite-alternate fará com que continue indefinidamente.
• A propriedade animation-direction indica como uma animação deve ser reproduzida. Os valores incluem normal (para frente), reverse, alternate, etc.
• A propriedade animation-timing-function define a curva de velocidade. Os valores incluem ease-in-out para um começo e fim suaves, cubic-bezier para criar uma curva de aparência complexa, etc.
• A propriedade animation-fill-mode define como um elemento parece quando a animação não está sendo reproduzida. Os valores incluem forwards para reter os valores definidos pelo último quadro-chave, etc.

Agora para juntar tudo! Neste exemplo da W3Schools, que anexa uma animação (chamada “example”) ao elemento <div>, você pode ver que o elemento é um quadrado de 100px e tem um fundo vermelho. Quando a animação começa, ela continuará por 4 segundos enquanto o fundo transita de vermelho para amarelo:

/* O código de animação */
@keyframes exemplo {
de {background-color: red;}
para {background-color: yellow;}
}

/* O elemento ao qual aplicar a animação */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

(Nota: Este é apenas um exemplo. Animações de quadro-chave não são a única maneira de criar animações CSS, e elas não são compatíveis com todas as versões de navegador — continue lendo para mais informações e dicas sobre compatibilidade.)

3 Razões Incríveis para Implementar Animações CSS

Desde impulsionar interações inesquecíveis até garantir que elas aconteçam na velocidade das expectativas modernas, as animações CSS têm muito a agregar à experiência digital — tanto para você quanto para seus incríveis clientes ou visitantes.

Crie uma História e Experiência Únicas

Os dias dos sites funcionando como outdoors digitais estão no espelho retrovisor.

Na economia global, websites e aplicativos são sua melhor oportunidade para contar a história da sua marca.

Por que focar na sua história? Porque uma ótima história destaca sua marca, captura a atenção do seu público ideal, cria conexões duradouras e — talvez mais importante — inspira ação.

E a sua história é, em parte, construída sobre os elementos interativos que você inclui na sua experiência do usuário.

As animações CSS são todas sobre criar experiências únicas que reagem e se movem com o usuário, construindo um relacionamento e engajamento com a história da sua marca.

Renove e Mantenha com Menos Teclas

O CSS é uma linguagem de codificação organizada e relativamente breve. No mundo do desenvolvimento web, é o que se conhece por “limpo”. Folhas de estilo podem geralmente ser mantidas no mínimo para projetos simples de aplicativos e sites.

Isso significa que quando for hora de atualizar seu projeto, fazer manutenção de rotina, ou simplesmente renovar sua aparência e experiência — deve ser bastante rápido localizar onde fazer a alteração, criar sua atualização e aplicá-la em toda a sua interface. Não há necessidade de re-codificar e implantar muitos e muitos arquivos HTML individuais.

Otimizar Sua Velocidade

O CSS é considerado “leve” quando comparado ao JavaScript e outras linguagens de programação, tornando-o uma excelente ferramenta para adicionar conteúdo e experiências envolventes ao seu produto — sem também adicionar peso que retarda o carregamento.

Além disso, também tende a ser agressivamente armazenado em Cache. Juntos, esses fatores significam que as animações criadas usando CSS devem ser rápidas para aparecer após aquele primeiro clique, bem como em carregamentos subsequentes do seu site ou aplicativo.

Como um fator importante de classificação quando se trata de resultados de pesquisa do Google, a velocidade é algo em que todas as empresas com presença online deveriam pensar.

Considerações Antes de Mergulhar nas Animações CSS

Agora entrando na zona de desaceleração. Antes de se aventurar de cabeça nas animações CSS, existem alguns pequenos obstáculos que queremos garantir que você esteja ciente e preparado para lidar.

Preocupações com Compatibilidade

Já reparou como algumas funcionalidades parecem desaparecer ou atrapalhar quando você está interagindo com um site pelo telefone — ou deixam seu computador extremamente lento?

Diferentes dispositivos (telefones móveis, smartwatches, tablets, computadores, etc.) e navegadores (Chrome, Safari, Firefox, etc.) são todos construídos usando diferentes tecnologias. Essas tecnologias significam como eles interagem com as linguagens de código pode variar — e não é diferente no caso das animações CSS.

Se você não fizer ajustes personalizados, um efeito de animação que parece incrivelmente legal no Firefox com seu laptop pode parecer ou agir de forma estranha para alguém que o visualize usando o Safari em seu telefone.

O teste de garantia de qualidade (QA) é fundamental para garantir que suas animações CSS sejam compatíveis em todos os locais onde os usuários interagem com sua presença digital.

Solução: Use um validador de CSS e ferramentas de desenvolvedor do navegador para ajudar a identificar problemas de compatibilidade e erros ao criar CSS. Aqueles que são especialmente hábeis com código podem instalar uma biblioteca de mixins Sass como Bourbon para manter prefixos de navegador (webkit para Chrome e Safari, moz para Firefox, etc.) atualizados e compatíveis.

17 Animações CSS Dinâmicas para Experimentar Hoje

Pronto para usar animações CSS para criar experiências digitais incríveis que atraem e retêm usuários? Pronto para aumentar a tão importante velocidade do site e reduzir o tempo de manutenção e redesign?

Então você veio ao lugar certo! Compilamos algumas animações CSS incríveis para o seu prazer visual. Clique em qualquer opção que chame a sua atenção para adquirir o código de que precisa, e então você pode adicioná-lo à folha de estilo do seu site. (Para sua informação, os Pens públicos no CodePen são gratuitos para uso por qualquer pessoa para qualquer finalidade, conforme os detalhes de licenciamento deles.)

Animações de Carregamento

As animações de carregamento podem não ser a classe mais empolgante de animação CSS, mas são críticas para a experiência do usuário. Visitantes de aplicativos e sites tendem a ser mais pacientes com um pouco de tempo de carregamento quando você fornece um indicador de que algo ótimo está por vir em breve.

1. “Loader CSS com pontos” por Aliaksei Peterson

Até agora, uma linha pulsante de pontos é universal para “Só um momento!” Assim como o código, esta opção é clara e concisa, tornando-a uma boa escolha para uma presença online com um tom sério ou estilo minimalista.

Veja o Pen
Loader CSS com pontos de Aliaksei Peterson (@petersonby)
no CodePen.

2. “Spinners de Carregamento Simples em HTML & SVG” por Stephen Delaney 

Outro símbolo clássico de carregamento — o spinner. Esta animação vem com uma opção para integrar um SVG, que significa Gráfico Vetorial Escalável, que pode ser escalado sem perda de qualidade.

Veja o Pen
Carregadores de Spinners Simples em HTML & SVG por Stephen Delaney (@sdelaney)
no CodePen.

3. “Animação de Carregamento” por Mohamed Yousef

Este conjunto giratório de formas semelhantes a lágrimas oferece uma animação belamente simples para se perder, tornando um pouco mais de tempo de carregamento muito menos irritante. O que mais você poderia pedir?

Veja o Pen
Animação de Carregamento por Mohamed Yousef (@Freeps2)
no CodePen.

4. “Animação Apenas em Css #02” por Hisami Kurita

Uma animação impressionante, puramente em CSS, que nos lembra a entrada de um site de um restaurante ou hotel sofisticado. Altere a cor e o nome para combinar com a sua própria marca.

Veja o Pen
Animação Somente em Css #02 por Hisami Kurita (@hisamikurita)
no CodePen.

5. “A Animação do Carregador Brilhante – CSS Puro” por Maxime Rossignol

A tela de carregamento mais criativa que já vimos, esta animação dá ao espectador muito para observar enquanto espera que o resto dos seus elementos digitais ganhem vida.

Veja o Pen
O Carregador Luminoso – Animação CSS Pura por Maxime Rossignol (@Maxoor)
em CodePen.

Animações de Conteúdo

Procurando uma maneira de garantir que os usuários do seu aplicativo e site não percam informações cruciais? Destaque-as com uma dessas animações CSS.

6. “Animação de Texto em Mudança CSS” por Coding Yaar

Adicione um pouco de destaque a títulos e outros textos importantes com esta animação, que inclui detalhes como movimento de deslize, mudança de cores e mais.

Veja o Pen
Animação de Texto em Mudança CSS por Coding Yaar (@codingyaar)
no CodePen.

7. “Efeito de Revelação de Bloco CSS” por Abubaker Saeed

O efeito de “revelação” com essa animação oferece mais uma maneira interessante de atrair a atenção para elementos de conteúdo importantes que você deseja garantir que os visitantes não percam.

Veja o Pen
Efeito de Revelação de Bloco CSS por Abubaker Saeed (@AbubakerSaeed)
no CodePen.

8. “Revelador CSS” por Adam Kuhn

Com muitas fontes interessantes, botões animados e um recurso de virar que revela mais informações — esta parece ser uma ótima opção para introduzir os usuários a seções mais longas de conteúdo imperdível como Perguntas Frequentes, funcionalidades, etc.

Veja o Pen
Revelador CSS por Adam Kuhn (@cobra_winfrey)
em CodePen.

9. “Cartão Informativo Animado” por Adam Kuhn

Do mesmo criador da animação CSS anterior, esta opção apresenta outra forma ousada e criativa de guiar os usuários pelos elementos da história da sua marca.

Veja o Pen
Animated Info Card por Adam Kuhn (@cobra_winfrey)
em CodePen.

Animações de Botão

Os botões são frequentemente o portal para levar os usuários a tomar uma ação ou mergulhar mais fundo no seu conteúdo. Inspire interação adicionando animações CSS aos botões importantes.

10. “Efeito de Deslize no Botão CSS ao Passar o Mouse” por RazorX

Muitas opções aqui para adicionar animações de preenchimento de cor a botões que, de outra forma, seriam simples.

Veja o Pen
Efeito de Deslizamento no Hover do Botão CSS por RazorX (@RazorXio)
em CodePen.

11. “Animações de Botão” por Alex Belmonte

Quer adicionar um pouco de movimento àqueles botões? Adicione um efeito de passagem do mouse e ações como saltar, balançar e mais aos seus botões com este CSS.

Veja o Pen
Animações de Botão por Alex Belmonte (@AlexBelmonte)
no CodePen.

12. “Efeito de hover em botão CSS” por Julia

Uma lavagem de cor mínima, mas impactante, adiciona alguma surpresa e encanto aos seus botões.

Veja o Pen
Efeito de hover em botão CSS de Julia (@sfoxy)
em CodePen.

Animações de Fundo

Você deseja que os fundos de certos elementos do seu site ou aplicativo sejam apenas interessantes o suficiente para chamar a atenção — sem ofuscar o que você deseja que os usuários leiam e façam.

13. “Gradiente de Fundo Animado” por Mario Klingemann

Aplique este loop infinito de cores ao fundo das seções principais do seu site ou aplicativo para adicionar um toque de movimento.

Veja o Pen
Gradiente de Fundo Animado por Mario Klingemann (@quasimondo)
em CodePen.

14. “ Animações CSS com SVGs” por Joyanna

Formas suaves e coloridas com movimentos delicados criam um fundo distintivo para as suas seções mais importantes de conteúdo.

Veja o Pen
Animações em CSS com SVGs por Joyanna (@joyanna)
no CodePen.

15. “Scroll parallax simples” por Ungmo Lee

Uma animação de rolagem parallax permite que tanto o primeiro plano quanto o fundo se movam, mas em velocidades diferentes para criar a ilusão de profundidade. Como você pode ver no exemplo, o efeito parallax pode ser esmagador quando não aplicado com moderação.

Veja o Pen
Scroll parallax simples por Ungmo Lee (@ungmo2)
no CodePen.

Animações em Qualquer Lugar

Experimente essas animações CSS apenas por diversão para adicionar um pouco de *tempero* em vários pontos da experiência do usuário.

16. “Modelo: Logo” por Alex Katz

Passe o mouse sobre o logotipo para ver um leve efeito de expansão. Esse movimento sutil pode ser usado em logotipos, bem como em botões, ícones e outros componentes.

Veja o Pen
Template: Logo por Alex Katz (@katzkode)
no CodePen.

17. “Animação Flutuante – CSS” por Mario Duarte

Um efeito flutuante suave como este é outro toque surpreendente e divertido que mostra aos espectadores que você se importa com suas propriedades digitais assim como com a experiência deles.

Veja o Pen
Animação Flutuante – CSS por Mario Duarte (@MarioDesigns)
em CodePen.

Como Adicionar CSS ao Seu Site

Cada uma das animações CSS acima é acompanhada por HTML, CSS e, às vezes, outro código que você pode colar diretamente na sua folha de estilo do site e editar conforme necessário para personalizá-lo.

Se você tem um site personalizado onde gerencia o código e ainda não está familiarizado com o CSS, achamos que seria útil conhecer a linguagem antes de tentar implementar as animações acima. Aprenda os conceitos básicos de criar uma linha de código e depois mergulhe nos melhores tutoriais para desenvolver suas habilidades em CSS com o guia da DreamHost para aprender CSS.

Você notará pelos exemplos acima que pode ser necessário bastante código para criar uma animação. Se você está confortável com CSS e pronto para otimizar espaço e tempo, considere usar uma biblioteca de animação CSS. Cada biblioteca terá instruções sobre como adicioná-la ao seu site, geralmente envolvendo a adição de um arquivo fonte ou CDN à sua marcação. Uma vez instalado, você pode usar o shorthand específico da biblioteca para adicionar suas animações.

Se você está utilizando um site WordPress, a própria plataforma oferece um guia útil para editar CSS usando o Site Editor (um recurso beta disponível em alguns temas) ou o Customizer (disponível na maioria dos temas clássicos e em alguns temas de terceiros). Dentro dessas telas de edição é onde você colará o código dos nossos exemplos de animação CSS acima.

Mas e se um site que permita contar a história da sua marca ainda é apenas um sonho? Então temos boas notícias, porque na DreamHost nós nos especializamos em tornar os sonhos de sites uma realidade. Com design web personalizado, um construtor de sites WP fácil de usar, serviços profissionais de nossos especialistas internos e, claro, robustas opções de Hospedagem — a DreamHost ajudará você a colocar seu sonho online.