Animações

O letreiro da Casa da Restinga pode girar, deslizar ou mudar de cor. Movimento chama atenção. Também cansa, enjoa e atrapalha quem pede menos estímulo. Este capítulo ensina o mínimo de animação CSS e o respeito a prefers-reduced-motion.

O exemplo está em exemplos/11-animacoes/. Natal, conteúdo fictício. Este volume tem 23 capítulos.

Trabalhe na cópia inicio da etapa. Leia e digite o código; mude uma coisa. Antes de recarregar, anote sua previsão. Depois confira com a referência completa. Se nada mudar, confira o arquivo salvo e o caminho aberto. Blocos adicionais do capítulo podem ser digitados no console; o exemplo completo mostra a aplicação daquela etapa.

O que você vai aprender

• Definir um movimento com @keyframes.
• Aplicar com animation (nome, duração, repetição).
• Escolher uma curva de tempo (linear, ease, ease-in-out).
• Animar cor, não só posição.
• Desligar o espetáculo quando a pessoa pede movimento reduzido.

@keyframes: o roteiro

@keyframes nomeia um roteiro reutilizável. to é o estado final. Se você omite from, o navegador parte do que o elemento já é.

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}

transform: rotate(360deg) é uma volta completa. O ponto de partida implícito é rotate(0deg).

O nome girar não pinta nada sozinho. É só o roteiro. A peça precisa usar o roteiro.

Mude uma coisa. Troque 360deg por 45deg. Preveja um quarto de volta. Recarregue e confira.

Erro comum: escrever @keyframes e esquecer de ligar animation na classe. Nada se mexe.

A propriedade animation

animation aplica o roteiro. A forma curta junta nome, duração, repetição e curva.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Giro — Casa da Restinga</title>
    <style>
      @keyframes girar {
        to { transform: rotate(360deg); }
      }
      .xicara {
        display: inline-block;
        font-size: 2rem;
        animation: girar 0.5s infinite linear;
      }
    </style>
  </head>
  <body>
    <p>A xícara da Restinga: <span class="xicara">☕</span></p>
  </body>
</html>

Leia a linha: faça o que girar descreve, em meio segundo, sem parar, em velocidade constante.

A forma longa existe: animation-name, animation-duration, animation-iteration-count, animation-direction, animation-timing-function.

alternate vai e volta. Sem ele, o giro recomeça do zero a cada ciclo.

Mude uma coisa. Troque 0.5s por 3s. Preveja um giro preguiçoso. Recarregue e confira.

Erro comum: animation: girar; sem duração. Sem tempo, o navegador não sabe o ritmo.

A curva do tempo

Animar é ir de 0 a 1. A função de temporização diz se a viagem é reta ou se acelera.

• linear — velocidade constante.
• ease — arranque e chegada mais suaves (padrão em muitas transições).
• ease-in — começa devagar.
• ease-out — termina devagar.
• ease-in-out — as duas pontas suaves.
• cubic-bezier(...) — curva feita à mão. Só quando as prontas não bastam.

.onda {
  animation-name: deslizar;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

ease-out lembra uma bola que perde força. linear lembra esteira. Para um letreiro da cafeteria, ease-in-out costuma parecer menos mecânico.

Mude uma coisa. Troque ease-in-out por linear. Preveja um vai-e-vem sem desacelerar nas pontas. Recarregue e confira.

Erro comum: animar dez propriedades ao mesmo tempo “para ficar vivo”. O olho não sabe onde olhar.

Cor também anima

from vale 0%. to vale 100%. Você pode marcar porcentagens no meio.

@keyframes maré {
  0%, 100% { color: #0d5c63; }
  50% { color: #c45c26; }
}
.marca {
  animation: maré 4s infinite linear;
}

Tamanho, opacidade, posição e cor entram nessa lista. Nem toda propriedade anima bem. Se nada acontecer, aquela propriedade provavelmente não é interpolável.

Mude uma coisa. Troque 4s por 800ms. Preveja um pisca-pisca. Recarregue. Se enjoar, volte.

Erro comum: animar display. Ele não interpola. O elemento some ou aparece, sem meio-termo.

Transição: de um estado a outro

animation segue um roteiro sozinha. transition interpola quando algo muda: hover, foco, uma classe.

.botao {
  background: #0d5c63;
  color: #fff;
  transition: background 0.2s ease;
}
.botao:hover,
.botao:focus-visible {
  background: #c45c26;
}
.botao:focus-visible {
  outline: 3px solid #0d5c63;
  outline-offset: 2px;
}

Para um botão da Restinga, transição curta basta. Animação infinita no botão de envio compete com o clique.

Mude uma coisa. Suba 0.2s para 2s. Preveja um hover arrastado. Recarregue e confira. Depois volte.

Erro comum: transition: all 2s no body. Tudo atrasado, inclusive o foco.

Respeite prefers-reduced-motion

Algumas pessoas pedem menos movimento no sistema operacional. O navegador expõe isso com a media query prefers-reduced-motion.

@media (prefers-reduced-motion: reduce) {
  .xicara,
  .marca,
  .onda {
    animation: none;
  }
  .botao {
    transition: none;
  }
}

Movimento é extra, não conteúdo. O preço, o horário e o alt da foto continuam no HTML, parados.

No Windows, a opção fica em configurações de acessibilidade / efeitos visuais. Ative, recarregue o exemplo, confira a xícara quieta. Depois desative se quiser o giro de volta.

Arquivo no disco: o roteiro. Página no navegador: o movimento. 127.0.0.1 para testar. Publicação não é pedida.

Mude uma coisa. Com a opção de movimento reduzido ligada, comente o bloco @media. Preveja o giro voltar contra o pedido da pessoa. Recarregue. Restaure o bloco.

Erro comum: esconder informação só na animação. Quem pede movimento reduzido ainda precisa ler o cardápio.

Atividades

1. Qual a diferença entre @keyframes e animation?
2. linear e ease-out mudam o quê, além da duração?
3. Por que transition cabe melhor num botão do que animation: ... infinite?
4. O que o bloco prefers-reduced-motion: reduce deve fazer no exemplo da xícara?

Respostas comentadas

1. @keyframes é o roteiro nomeado. animation é o pedido para uma peça seguir aquele roteiro, com tempo e repetição.
2. A curva: linear não acelera; ease-out desacelera no fim. O destino pode ser o mesmo.
3. O botão reage a um estado (hover, foco, clique). Loop infinito disputa atenção com a ação.
4. Desligar animation (e transições longas). O conteúdo escrito permanece.

Referências

• Usando animações CSS
• @keyframes
• animation
• easing
• prefers-reduced-motion