Motion / CSS Motion Lab
Animações e respostas da interface
Veja como um elemento aparece, como um botão responde e como uma tela indica que está carregando.
Como experimentar
- Clique em “Reproduzir animações” para ver a entrada e o indicador de carregamento.
- Escolha uma velocidade e reproduza novamente para comparar.
- Teste “Salvar alteração” e alterne entre “Visão geral” e “Detalhes”.
Um elemento aparece.
Use “Reproduzir animações” para ver este aviso entrar suavemente na tela.
Uma entrada, sem distrações.
Uma ação recebe confirmação.
Clique no botão e veja a mensagem mudar. Com o mouse, a seta também responde ao passar sobre ela.
Simulação: nenhum dado é salvo. Em um formulário real, a confirmação indicaria que a alteração foi concluída.
Aguardando seu clique.
O conteúdo muda no mesmo lugar.
Alterne entre os dois botões. O azul indica a seção selecionada e o texto muda sem recarregar a página.
Em uma página de produto, isso poderia separar o resumo das especificações. Aqui, o conteúdo é apenas ilustrativo.
Visão geral selecionada: aqui apareceria um resumo do conteúdo.
A espera fica visível.
Use “Reproduzir animações” para ativar o indicador. Em um site, ele mostraria que uma ação está em andamento.
Demonstração de carregamento.
Nenhum arquivo está sendo baixado.
Ver o código desta animação (CSS)
@keyframes arrival {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.arrival.is-playing {
animation: arrival var(--duration, 600ms)
cubic-bezier(.2, .8, .2, 1) both;
}
@media (prefers-reduced-motion: reduce) {
.arrival.is-playing { animation: none; }
}Onde isso pode ser usado
Em um projeto real, esses movimentos ajudam a perceber que uma ação foi recebida e a acompanhar mudanças na tela.
CSS · Web Animations
← Voltar para Labs