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 elementoclass
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
Qual propriedade de transição serve para especificar o easing?
transition-duration
transition-easing
transition-cubic-bezier
transition-timing-function
animation-ease
É uma prática recomendada usar transition-property: all
all
pode levar a problemas de desempenho e transições não intencionais.Todas as propriedades podem passar pela transição.
font-family
não podem fazer a transição.