Animations

Aplicam movimento e transições prontas a qualquer elemento, sem precisar escrever @keyframes manualmente. Divididas em três famílias: From (entra/sai deslocado de uma borda), To (sai/entra pela posição oposta) e States (indicam um estado contínuo, como “carregando” ou “novo item”).

Entrada e saída — família “From”

O elemento parte de uma posição deslocada (fora da tela/área visível) até chegar em (0,0) — ou o inverso, ao sair.

Classe	O que faz
.animate-from-top--in	Entra deslizando de cima para baixo, com fade-in
.animate-from-top--out	Sai deslizando para cima, com fade-out
.animate-from-bottom--in (alias .animate-bottom)	Entra deslizando de baixo para cima, com fade-in
.animate-from-bottom--out	Sai deslizando para baixo, com fade-out
.animate-from-left--in	Entra deslizando da esquerda, com fade-in
.animate-from-left--out	Sai deslizando para a esquerda, com fade-out
.animate-from-right--in	Entra deslizando da direita, com fade-in
.animate-from-right--out	Sai deslizando para a direita, com fade-out

Quando usar: painéis, drawers, tooltips e dropdowns que aparecem vindos de uma borda da tela.

Entrada e saída — família “To”

O inverso da família “From”: o elemento parte de (0,0) em direção a uma posição deslocada.

Classe	O que faz
.animate-to-top--in	Entra vindo de baixo, indo em direção ao topo
.animate-to-top--out	Sai indo em direção ao topo
.animate-to-bottom--in	Entra vindo de cima, indo em direção à base
.animate-to-bottom--out	Sai indo em direção à base
.animate-to-left--in	Entra vindo da direita, indo em direção à esquerda
.animate-to-left--out	Sai indo em direção à esquerda
.animate-to-right--in	Entra vindo da esquerda, indo em direção à direita
.animate-to-right--out	Sai indo em direção à direita

Fade

Classe	O que faz
.animate-fade--in	Fade-in simples, sem deslocamento (opacity: 0 → 1)

Estados (states)

Animações contínuas (animation-iteration-count: infinite, exceto .animate-has-update) usadas para sinalizar um estado do elemento, não uma transição de entrada/saída.

Classe	O que faz	Duração
.animate-new	Pulso de “ping” (box-shadow expandindo) para destacar um item recém-criado	3s, infinito
.animate-loading	Pulso de outline para indicar carregamento em progresso	2s, infinito
.animate-pulse	Pisca a opacidade do elemento (efeito skeleton/placeholder)	2s, infinito
.animate-has-update	Realça o elemento uma vez (outline + fundo amarelo) para indicar que teve uma atualização	5s, roda uma vez

Note: as animações de entrada rodam uma vez ao montar o elemento — para vê-las de novo, recarregue a página ou re-renderize o componente.

Visão ao vivo

Storybook mds-styles (HTML/CSS) — utilities-animations ↗