CSS com movimento reduzido
Interrompa uma animação CSS decorativa quando houver preferência por menos movimento.
@keyframes mark-slide {
to { transform: translateX(12px); }
}
.motion-mark { animation: mark-slide 1.2s linear infinite; }
.status:focus-visible { outline: 2px solid currentColor; }
@media (prefers-reduced-motion: reduce) {
.motion-mark { animation: none; transform: none; }
}Projeto
Verifique as duas preferências e o foco pelo teclado, preservando o texto de estado quando o movimento estiver desativado.
Revise antes de aplicar
Compare o comportamento real com o resultado esperado. Se uma verificação falhar, investigue a causa antes de fazer outras alterações.
Modelos
Configure um endpoint compatível com OpenAI ou Anthropic com a URL base e uma chave API, quando necessária. Teste a conexão. O servidor local precisa estar em execução; ferramentas remotas podem transmitir dados separadamente.
@keyframes mark-slide {
to { transform: translateX(12px); }
}
.motion-mark { animation: mark-slide 1.2s linear infinite; }
.status:focus-visible { outline: 2px solid currentColor; }
@media (prefers-reduced-motion: reduce) {
.motion-mark { animation: none; transform: none; }
}Trate as preferências de movimento como parte de uma alteração de interface
O MotionHearth é um ambiente de programação para Windows para desenvolver alterações de interface com um modelo de IA conectado. Traga a pasta do projeto e descreva o que uma interação deve comunicar. A conversa pode acompanhar o componente e seus estilos juntos, ajudando você a revisar uma animação proposta no contexto do status, foco ou retorno que ela deve transmitir.
Uma tarefa sugerida por motion.css é revisar uma animação quando o movimento reduzido é solicitado. Pergunte como a interface existente comunica a mesma informação depois que o movimento para e se o foco do teclado continua evidente. Essas perguntas transformam o exemplo em uma alteração de aplicação que você pode inspecionar. Elas também mantêm a solicitação mais ampla do que simplesmente excluir um quadro-chave, mas pequena o suficiente para verificar na tela real.
Você pode escolher um modelo de IA sem restrições se seu endpoint suportado compatível com OpenAI ou da Anthropic oferecer um. Adicione os detalhes de conexão e as credenciais exigidas, reconhecendo que as capacidades e restrições pertencem ao modelo e ao servidor. Revise as edições resultantes de CSS e componentes antes de testar a interface com movimento ativado e reduzido. Use a navegação por teclado além da entrada por ponteiro. O objetivo é um comportamento coerente sob ambas as preferências, sustentado pelo que sua aplicação renderiza, e não apenas pela descrição do assistente.
Verificação conjunta de movimento e interação
O que uma solicitação de movimento reduzido deve especificar?
Nomeie o elemento em movimento, a informação que transmite e o comportamento alternativo esperado. Inclua o componente e a folha de estilo relevantes. Isso permite que a alteração proposta preserve um retorno útil, em vez de remover movimento sem considerar o que os usuários perdem.
Uma animação parada pode ocultar o status atual?
Pode, se o movimento era a única indicação. Inspecione o texto, a forma ou o marcador de estado que restam quando a animação é desativada. Peça uma alternativa adequada à interface e verifique se ela continua clara durante toda a interação.
Por que testar o foco do teclado durante uma alteração de movimento?
Estilos próximos de um controle animado também podem afetar seu indicador de foco. Navegue pela tela alterada usando o teclado e confirme qual elemento está ativo. Revisar apenas os quadros-chave não estabelece se a interação completa continua compreensível.
Quanto o modelo pode verificar a partir dos arquivos de código-fonte?
Ele pode propor uma interpretação do código disponível dentro de seu contexto e de suas ferramentas. Você ainda precisa inspecionar os estados renderizados e executar as verificações do projeto. Trate telas, estilos ou condições de execução ausentes como limites da revisão.
MotionHearth · Atualizado 2026-10-25