Transições

Podcast do CSS - 044: Transições

Ao interagir com um site, você pode perceber que muitos elementos têm state. Por exemplo, os menus suspensos podem estar em estados abertos ou fechados. Os botões podem mudar de cor quando o foco está em foco ou quando você passa o cursor sobre eles. Os modais aparecem e desaparecem.

Por padrão, o CSS muda o estilo desses estados instantaneamente.

Usando transições CSS, é possível interpolar entre o estado inicial e o estado de destino do elemento. A transição entre os dois melhora a experiência do usuário, fornecendo direção visual, suporte e dicas sobre a causa e o efeito da interação.

Propriedades de transição

Para usar transições no CSS, é possível usar as várias propriedades de transição ou a propriedade abreviada transition.

propriedade de transição

A propriedade transition-property especifica quais estilos vão ser transferidos.

.my-element {
  transition-property: background-color;
}

O transition-property aceita um ou mais nomes de propriedades CSS em uma lista separada por vírgulas.

Como alternativa, você pode usar transition-property: all para indicar que todas as propriedades precisam fazer a transição.

duração da transição

A propriedade transition-duration é usada para definir o tempo de conclusão de uma transição.

transition-duration aceita unidades de tempo, em segundos (s) ou milissegundos (ms), e o padrão é 0s.

função de tempo de transição

Use a propriedade transition-timing-function para variar a velocidade de uma transição de CSS durante a transition-duration.

Por padrão, o CSS faz a transição dos seus elementos a uma velocidade constante (transition-timing-function: linear). No entanto, as transições lineares podem parecer um pouco artificiais: na vida real, os objetos têm peso e não podem parar e começar instantaneamente. Começar ou sair de uma transição pode tornar suas transições mais animadas e naturais.

Nosso módulo sobre animação CSS oferece uma boa visão geral das funções de tempo.

Use o DevTools para testar diferentes funções de tempo em tempo real.

atraso na transição

Use a propriedade transition-delay para especificar o horário em que uma transição começará. Se transition-duration não for especificado, as transições começarão instantaneamente porque o valor padrão é 0s. Essa propriedade aceita uma unidade de tempo, por exemplo, segundos (s) ou milissegundos (ms).

Essa propriedade é útil para transições impressionantes, alcançadas ao definir um transition-delay mais longo para cada elemento subsequente em um grupo.

transition-delay também é útil para depuração. Definir o atraso como um valor negativo pode iniciar uma transição mais para a linha do tempo.

abreviação: transição

Como a maioria das propriedades CSS, há uma versão abreviada. transition combina transition-property, transition-duration, transition-timing-function e transition-delay.

.longhand {
  transition-property: transform;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
}

.shorthand {
  transition: transform 300ms ease-in-out 0s;
}

O que pode ou não fazer a transição?

Ao escrever CSS, é possível especificar quais propriedades precisam ter transições animadas. Consulte esta lista de MDN de propriedades CSS animadas.

Em geral, só é possível fazer a transição de elementos que podem ter um "estado intermediário" entre os estados inicial e final. Por exemplo, é impossível adicionar transições a font-family, porque não está claro como seria o "estado intermediário" entre serif e monospace. Por outro lado, é possível adicionar transições para a font-size porque a unidade é um comprimento que pode ser interpolado.

Aqui estão algumas propriedades comuns que podem ser transferidas.

Transformar

A propriedade CSS do transform costuma ser migrada porque é uma propriedade acelerada por GPU que resulta em uma animação mais suave, além de consumir menos bateria. Essa propriedade permite dimensionar, girar, transladar ou inclinar um elemento arbitrariamente.

Confira a seção sobre transformações no nosso módulo de funções.

Cor

Antes, durante e depois da interação, a cor pode ser um ótimo indicador de estado. Por exemplo, um botão pode mudar de cor se passar o cursor sobre ele. Essa mudança de cor pode fornecer feedback ao usuário de que o botão é clicável.

As propriedades color, background-color e border-color são apenas alguns lugares em que a cor pode ser transferida na interação.

Confira nosso módulo sobre cores.

Sombras

As sombras costumam ser transformadas para indicar mudanças de elevação, como o foco do usuário.

Confira nosso módulo sobre sombras.

Filtros

O filter é uma propriedade CSS eficiente que permite adicionar efeitos gráficos rapidamente. A transição entre diferentes estados filter pode criar alguns resultados bastante impressionantes.

Confira nosso módulo sobre filtros.

Gatilhos de transição

O CSS precisa incluir uma mudança de estado e um evento que acione essa mudança para que as transições CSS sejam ativadas. Um exemplo típico desse gatilho é a pseudoclasse :hover. Essa pseudoclasse faz a correspondência quando o usuário passa o cursor sobre um elemento.

Confira abaixo uma lista de algumas pseudoclasses e eventos que podem acionar mudanças de estado nos elementos.

• :hover: corresponde se o cursor está sobre o elemento.
• :focus: corresponde se o elemento está em foco.
• :focus-within : corresponde se o elemento ou qualquer um dos descendentes estiver focado.
• :target: corresponde quando o fragmento do URL atual corresponde ao ID do elemento.
• :active: corresponde ao momento em que o elemento está sendo ativado (normalmente quando o mouse é pressionado sobre ele).
• Mudança de class do JavaScript: quando o CSS de um elemento class muda usando JavaScript, o CSS faz a transição das propriedades qualificadas que foram alteradas.

Transições diferentes para entrada ou saída

Ao definir diferentes propriedades transition ao passar o cursor/foco, é possível criar alguns efeitos interessantes.

.my-element {
  background: red;

  /* This transition is applied on the "exit" transition */
  transition: background 2000ms ease-in;
}

.my-element:hover {
  background: blue;

  /* This transition is applied on the "enter" transition */
  transition: background 150ms ease;
}

Considerações de acessibilidade

As transições de CSS não são para todo mundo. Para algumas pessoas, transições e animações podem causar desconforto ou enjoo. Felizmente, o CSS tem um recurso de mídia chamado prefers-reduced-motion, que detecta se um usuário indicou uma preferência por menos movimento no dispositivo.

/*
  If the user has expressed their preference for
  reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
  .my-element {
    transition: none;
  }
}

/*
  If the browser understands the media query and the user
  explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
  .my-element {
    transition: transform 250ms ease;
  }
}

Para mais informações sobre esse recurso de mídia, confira nossa postagem do blog prefers-Escolhad-motion: às vezes menos movimento é mais (em inglês).

Considerações sobre desempenho

Ao trabalhar com transições CSS, você pode ter problemas de desempenho ao adicionar transições para determinadas propriedades CSS. Por exemplo, quando propriedades como width ou height mudam, elas enviam o conteúdo para o restante da página. Isso força o CSS a calcular novas posições para cada elemento afetado em cada frame da transição. Sempre que possível, recomendamos o uso de propriedades como transform e opacity.

Confira nosso guia sobre animações CSS de alto desempenho para se aprofundar nesse assunto.

Teste seu conhecimento

Testar seus conhecimentos sobre transições