Animações no CSS – Saia do Zero em 10 Minutos!

Aprenda a sair do zero em animações no CSS em apenas 10 minutos! Veja como fazer transições e animar um botão com CSS.

Para criar animações no CSS, você tem dois caminhos: a propriedade transition, que suaviza a mudança de um estado para outro (como um botão que muda de cor no hover), e a regra @keyframes, que define vários passos de uma animação e é aplicada com a propriedade animation. Com elas você anima cores, tamanho, posição e opacidade sem JavaScript.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

O que você aprende neste vídeo

Resposta rápida: Nesta aula rápida, o Diego ensina o básico de animações no CSS em cerca de 10 minutos. Ele parte de um botão: primeiro o efeito de hover com scale (aumentar ao passar o mouse), depois a transition (propriedade + tempo + timing function) para suavizar e, por fim, as animações de verdade com @keyframes (definindo os estados com from/to ou percentuais) e a propriedade animation, inclusive fazendo o botão pulsar infinitamente (ótimo para call to action).

Neste vídeo (12 min):

• 0:00 - Animar um botão: o efeito hover com scale (aumentar ao passar o mouse).
• 2:00 - transition: suavizar a mudança (propriedade + tempo + timing function).
• 4:00 - Animações de verdade com @keyframes: definir os estados (from/to ou percentuais).
• 9:00 - Fazer a animação repetir para sempre (infinite) e o efeito de ida-e-volta (50%).
• 10:00 - Aplicações: fazer um botão pulsar para chamar a atenção (call to action).

Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:

Animações no CSS – Saia do Zero em 10 Minutos!

Na aula de hoje eu vou te mostrar como sair do zero em animações no CSS em apenas 10 minutos.

Você vai aprender como fazer transições no CSS para que possamos animar um botão. Aposto que você já viu em algum site um botão que fica aumentando e diminuindo de tamanho de forma automática, não é mesmo?

Nesta aula eu vou te mostrar exatamente como fazer isso usando o @keyframes, a ideia é que a gente consiga alterar a escala do botão, mas de forma suave e contínua.

Você verá que adicionar uma animação é muito importante pois deixa a transição mais suave e menos brusca.

E aí, bora aprender a fazer animações no CSS? Então vem comigo que você vai aprender tudo isso em 10 minutos!

VS Code – HTML e CSS

Ao longo desta aula, eu estarei utilizando o VS Code e a extensão Live Server.

A extensão Live Server nos permite visualizar no navegador o resultado de todos os códigos que estivermos desenvolvendo dentro do VS Code.

Caso queira conferir como baixar, instalar e personalizar seu VS Code com as extensões utilizadas ao longo dessa e de outras aulas de HTML e CSS aqui da Hashtag, confira essa aula aqui.

Apresentação do Projeto – Arquivos Iniciais

No material disponível para download, você encontrará os arquivos iniciais para esta aula dentro de uma pasta chamada Do Zero.

Dentro dessa pasta estarão os arquivos index.html e style.css que foram criados ao final do nosso projeto Formulário de Login em HTML e CSS, no qual desenvolvemos um formulário de login semelhante ao temos aqui na Hashtag.

Nessa aula daremos continuidade a esse projeto, implementando uma animação no botão Entrar.

Cursor Pointer e Hover

Antes de partirmos para a animação do nosso botão, vamos definir duas características para ele: o cursor pointer e o efeito hover.

A primeira será o atributo cursor:pointer, que podemos adicionar ao seletor do botão (button) dentro do arquivo style.css.

button {
  padding: 10px 15px;
  border-radius: 30px;
  border: none;
  background-image: linear-gradient(#256a8a, #3393c1);
  border: solid 1px #256a8a;
  border-right-width: 4px;
  border-bottom-width: 4px;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  align-self: center;
  width: 160px;
  cursor: pointer;
}

Isso fará com que, ao posicionarmos o cursor do mouse sobre o botão Entrar, ele altere da setinha padrão para uma mãozinha, indicando que o botão é clicável.

Além disso, podemos adicionar o pseudo-seletor :hover ao botão para que ele altere visualmente quando passarmos o cursor do mouse sobre ele.

A propriedade que vamos alterar será a propriedade scale, que modifica o tamanho do botão. Em 100%, temos o tamanho padrão, e acima desse valor, o botão irá aumentar. Vamos definir como 110% para o estado hover.

button {
  padding: 10px 15px;
  border-radius: 30px;
  border: none;
  background-image: linear-gradient(#256a8a, #3393c1);
  border: solid 1px #256a8a;
  border-right-width: 4px;
  border-bottom-width: 4px;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  align-self: center;
  width: 160px;
  cursor: pointer;
}

button:hover {
  scale: 110%;
}

Porém, ao fazer isso, repare que o botão muda de uma vez de um estado para o outro. Ele não tem uma transição/animação suave entre os estados. E é isso que desenvolveremos nessa aula.

Transição no CSS

No CSS, podemos usar tanto transições quanto animações para criar efeitos visuais dinâmicos.

As transições são mais usadas para criar mudanças suaves entre dois estados de um elemento, geralmente acionadas por uma interação do usuário. Como no nosso exemplo, em que temos um efeito de hover.

HTML e CSS Impressionador

Você vai aprender não só os fundamentos básicos, intermediários e avançados de HTML e CSS, como também vai aprender a integrar com os principais frameworks. Além disso, você vai sair do curso com um portfólio de projetos completo!

Começar agora

As animações, por outro lado, permitem controlar várias etapas de uma transformação ao longo do tempo, sendo mais complexas e oferecendo maior controle. Elas são usadas quando queremos criar efeitos mais sofisticados.

Vamos começar criando a transição. Para definir uma transição, adicionamos a propriedade transition dentro do seletor do elemento. No nosso exemplo, vamos aplicar a transição a um botão.

Para essa propriedade precisamos definir três valores:

1. Atributo a ser animado: A propriedade do elemento que desejamos animar.
2. Duração: O tempo em que a animação deve ocorrer.
3. Timing Function (Função de Temporização): Função que controla a velocidade da animação ao longo da sua duração.

Existem várias funções de temporização que podemos usar em uma transição CSS. Elas determinam como a velocidade da animação varia ao longo do tempo, especificando se a transição deve começar mais lenta e depois acelerar, manter uma velocidade constante, ou começar rápida e desacelerar, entre outras possibilidades.

Para a nossa transição, definiremos a propriedade scale, com o tempo de duração de 300ms e a timing function ease, em que a transição começa devagar, acelera no meio e desacelera no final.

button {
  padding: 10px 15px;
  border-radius: 30px;
  border: none;
  background-image: linear-gradient(#256a8a, #3393c1);
  border: solid 1px #256a8a;
  border-right-width: 4px;
  border-bottom-width: 4px;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  align-self: center;
  width: 160px;
  cursor: pointer;
  transition: scale 300ms ease;
}

Dessa forma, a escala do nosso botão mudará quando o usuário passar o mouse sobre ele ao longo de 300 milissegundos. Isso já tornará a transição muito mais suave e dinâmica.

Animação no CSS – @keyframes

Para criarmos a animação do nosso botão, primeiro precisamos comentar as linhas em que definimos a transição e o hover.

button {
  padding: 10px 15px;
  border-radius: 30px;
  border: none;
  background-image: linear-gradient(#256a8a, #3393c1);
  border: solid 1px #256a8a;
  border-right-width: 4px;
  border-bottom-width: 4px;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  align-self: center;
  width: 160px;
  cursor: pointer;
  /* transition: scale 300ms ease; */
}

/* button:hover {
  scale: 110%;
} */

Assim, a transição que criamos anteriormente não estará mais ativa para que possamos criar um novo efeito para o botão utilizando animação no CSS.

Nossa animação fará com que o tamanho do botão fique alterando o tempo todo, aumentando e diminuindo em looping.

Para criar uma animação, precisamos definir a propriedade animation dentro do seletor do botão. Essa propriedade é uma shorthand que contém outras subpropriedades que podem ser personalizadas.

Diferente do transition, em que construímos toda a animação dentro da própria propriedade, para a animation precisamos criar a animação através dos keyframes.

Os keyframes são parte fundamental das animações no CSS. Eles nos permitem definir os estados da animação e controlar como os estilos do elemento se transformam e mudam ao longo do tempo.

Para definir uma animação com keyframes, usamos a regra @keyframes seguida pelo nome da animação:

@keyframes nomeDaAnimação {
}

Dentro dos keyframes, definimos as etapas da animação usando percentuais, onde 0% é o estado inicial e 100% é o estado final, ou palavras-chave como from para o estado inicial e to para o estado final.

Os percentuais podem ser utilizados para definir quantos estados você quiser entre 0% e 100%. Isso permite criar animações detalhadas e com várias modificações ao longo do tempo.

O padrão mais básico envolve definir um estado inicial (from) e um estado final (to), onde determinamos como as propriedades do elemento devem iniciar e finalizar.

Vamos criar o keyframe aumentarTamanho, onde definiremos o estado inicial com a propriedade scale em 100%, e o estado final com 110%.

@keyframes aumentarTamanho {
  from {
    scale: 100%;
  }
  to {
    scale: 110%;
  }
}

Com o @keyframe criado, podemos adicionar a propriedade animation ao seletor do botão. O primeiro argumento é o nome do keyframe, seguido do tempo de duração e, por fim, da função de temporização.

Nesse caso, vamos definir a função de temporização como linear, ou seja, a animação ocorrerá a uma velocidade constante do início ao fim.

button {
  padding: 10px 15px;
  border-radius: 30px;
  border: none;
  background-image: linear-gradient(#256a8a, #3393c1);
  border: solid 1px #256a8a;
  border-right-width: 4px;
  border-bottom-width: 4px;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  align-self: center;
  width: 160px;
  cursor: pointer;
  animation: aumentarTamanho 3s linear;
  /* transition: scale 300ms ease; */
}

Com isso, ao carregar ou atualizar a página, o botão Entrar irá aumentar linearmente até chegar a 110% do seu tamanho inicial e depois voltará para o seu estado original.

No entanto, queremos que, ao atingir 110%, o botão volte linearmente para 100% e repita o processo. Atualmente, a animação faz com que o botão volte bruscamente para o estado original e encerre a animação.

Para resolver isso, precisamos adicionar a propriedade infinite à animation, fazendo com que a animação se repita infinitamente.

Além disso, precisamos modificar o keyframe para que tanto o estado inicial quanto o final sejam com scale em 100%, e adicionar uma etapa intermediária (50%) onde a escala será definida como 110%.

button {
  padding: 10px 15px;
  border-radius: 30px;
  border: none;
  background-image: linear-gradient(#256a8a, #3393c1);
  border: solid 1px #256a8a;
  border-right-width: 4px;
  border-bottom-width: 4px;
  color: white;
  text-transform: uppercase;
  font-weight: 700;
  align-self: center;
  width: 160px;
  cursor: pointer;
  animation: aumentarTamanho 3s linear infinite;
  /* transition: scale 300ms ease; */
}

@keyframes aumentarTamanho {
  from,
  to {
    scale: 100%;
  }
  50% {
    scale: 110%;
  }
}

Dessa forma, o botão começará com 100% de escala, aumentará para 110% e voltará para 100% em um intervalo de 3 segundos. Essa animação terá uma velocidade linear, alternando entre as etapas com a mesma velocidade, e ao final repetirá infinitamente.

Perguntas frequentes

Conclusão – Animações no CSS – Saia do Zero em 10 Minutos!

Na aula de hoje, eu te passei uma introdução rápida e direta às transições e animações no CSS, mostrando como você pode começar a adicionar efeitos visuais dinâmicos aos seus projetos.

Além do que vimos hoje, existem muitas outras possibilidades de criação e personalização com transições e animações no CSS.

No entanto, com a aula de hoje, você terá uma boa base para experimentar e aplicar essas importantes propriedades do CSS nos seus projetos, tornando-os mais dinâmicos, interativos e atraentes.

Hashtag Treinamentos

Para acessar publicações de HTML e CSS, clique aqui!