Artigos de Tecnologia e Negócios > Front-end

CSS: animações com Transition e Animation

Mario Souto
Mario Souto

Hoje em dia as animações nos websites vão muito além de simples detalhes, algumas marcas tem nas animações sua marca registrada, tal como o próprio Google após o seu último rebrand.

Animação do logo do Google

Vamos abordar técnicas de como fazer animações via CSS e no final vou deixar uma dica sobre como você pode ter ideias de trazer animações como essa do logo do Google para dentro de uma página web.

Transition: A base das animações baseadas em interação

Na web, diversas coisas podem ser animadas, essencialmente tudo o que possui etapas. Seja um formulário de cadastro na hora em que trocamos entre as fases, um produto sendo adicionado em um carrinho de campos, o surgimento de pedaços da página de acordo com um scroll. Na prática boa parte dessas animações acontece após o usuário executar uma ação.

Com isso em mente, vamos explorar a propriedade transition que se utilizada junto com os pseudo seletores :hover e :focus do CSS:

Na prática o transition pode ser aplicado para todos os valores que mudam entre os estilos padrões de um elemento e alguma variação aplicada seja via alguma ação de pseudo seletor (:hover e :focus) ou algum atributo ou classe que seja adicionada em uma tag e exista um seletor CSS aplicando alguma variação de estilo.

Somente valores quantificáveis podem ser animados. Isso quer dizer que não é possível fazer uma animação de display indo de none para block, mas sim de opacity de 0 para 1;

Focando na ideia de que Animações são trocas de estados onde podemos visualizar como algo foi de um ponto A para um ponto B, animar o background é só uma possibilidade, podemos manipular a largura e altura dos elementos, sua posição na página e uma propriedade que casa super bem com o transition é o transform.

Como o transform pode aplicar diferentes comportamentos a um elemento como mudar sua escala, alterar sua posição na página ou mesmo aplicar uma distorção com skew() isso abre todo um leque de possibilidades.

Formas comuns de utilizar o transition:

Animation: Animando automaticamente e com mais etapas

Como vimos anteriormente, para animarmos algo com transition, dependemos de alguma ação do usuário agora e se quisermos algo nesse estilo?

Repare que a animação está acontecendo sozinha de forma contínua, bem semelhante a alguns itens que existem para chamar a atenção como setas indicando que algum ponto é clicável em alguns sites. Para isso ser possível estamos utilizando a propriedae animation.

Para entendermos como fazer a animação do exemplo, precisamos primeiramente entender a ideia de trabalhar com keyframes. Basicamente iremos definir que dado um espaço de tempo entre o começo e o fim do mesmo determinadas propriedades CSS serão aplicadas.

@keyframes go-back {
    0% {
        transform: translateX(100px);
    }
    100% {
        transform: translateX(0);
    }
}

E para associarr esses keyframes em um elemento do HTML, precisamos adicionar essa animação go-back, ou qualquer outra, através da propriedade animation:

.quadrado {
    animation: go-back 1s;
}

Porém dessa forma a animação só acontece uma vez, caso tenhamos interesse em fazê-la acontecer de forma infinita podemos adicionar a propriedade animation-iteration-count: infinite; ao invés de infinite, podemos passar um número máximo de vezes que nossa animação irá se repetir, e caso você queria fazer a animação ir e voltar do ponto final para o começo e vice-versa é só adicionar a propriedade animation-direction: alternate;.

Dicas de animações comuns em sites:

Bounce

.ball {
  margin-top: 50px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: cornflowerblue;
  border: 2px solid #999;
  animation: bounce 1s infinite alternate;
  -webkit-animation: bounce 1s infinite alternate;
}
@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
@-webkit-keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-15px);
  }
}
.ball {
  margin-top: 50px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

Interceptando animations e transitions via JavaScript

Como vimos anteriormente, é possível ter vários níveis de controle nas animações com CSS, porém caso você queria ter um controle mais fino via JavaScript via um elemento.addEventListener é possível monitorar quanto uma transition ou um animation termina:

Melhorando a performance de animações com CSS

Esse post é mais introdutório, mas ainda sim acho válido citar que trabalhar com performance em animações pode exigir um pouco de conhecimento de como o browser funciona, e um pouco de como o CSS funciona nos navegadores.

Já adianto que existe uma propriedade que pode fazer milagres em alguns casos para melhorar performance de animações, mas que deve ser usado somente em último caso:

E se você quiser ter uma introdução mais profunda do tema de performance em animações, confere essa talk do Sérgio Lopes.

Caso você encontre alguma animação que realmente esteja prejudicando a experiência de usuários em devices menos potentes, você pode desabilitá-la utilizando o @prefers-reduce-motion

Libs extras

Por hoje é isso,espero que tenha gostado, em breve trarei mais dicas, não deixe de me seguir nas minhas redes sociais e acompanhar meus outros artigos em meu site pessoal https://mariosouto.com. E você pode achar muito conteúdo nos nossos cursos de html e css e de bootstrap.

Leia também:

Artigos de Tecnologia e Negócios > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 971 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana