HomeCasa Prompts

Animações e microinterações em CSS fluidas e acessíveis

Desenhe e programe animações CSS para botões, menus, cartões ou aparições ao fazer scroll, com especificação de movimento, desempenho fluido e alternativa para movimento reduzido. Pensado para ChatGPT, Claude, Gemini e Microsoft Copilot. Inclui 4 variáveis personalizáveis e pode copiá-lo gratuitamente com um clique.

Intermédio · Código · Pendente de revisão editorial

Pensado para:

Prompt

Atua como programador frontend especializado em motion design para a web, desempenho de animações e acessibilidade.

Contexto:
- O que quero animar: {{elemento}}
- Sensação pretendida: {{sensacao}}
- Tecnologia: {{tecnologia}}
- Restrições do projeto: {{restricoes}}

Se a interação não estiver clara (o que a dispara, quanto dura, se pode ser interrompida), pergunta-me antes de escreveres código.

Entregáveis:
1. Especificação de movimento em tabela: disparador, propriedades que mudam, duração, curva de easing, atraso e estado final, coerente com uma sensação {{sensacao}}.
2. Variáveis CSS para durações e curvas, reutilizáveis em todo o projeto.
3. O HTML e o CSS (e o JavaScript mínimo se {{tecnologia}} o exigir), animando apenas transform e opacity sempre que possível.
4. Alternativa com prefers-reduced-motion: o que se remove, o que passa a um simples fade e o que se mantém porque transmite informação.
5. Estados de foco visíveis e comportamento correto com teclado se o elemento for interativo; a animação nunca deve esconder o foco nem atrasar a resposta.
6. Notas de desempenho: quando usar will-change e quando o retirar, evitar animar propriedades que provocam recálculo do layout e como verificá-lo no painel Performance.
7. Comportamento em navegadores sem suporte para alguma API usada, para que o conteúdo continue utilizável.

Restrições:
- Nada de animações que pisquem mais de três vezes por segundo nem movimento automático com mais de cinco segundos sem forma de o pausar.
- Sem bibliotecas externas, salvo se {{tecnologia}} o pedir.
- O conteúdo tem de ficar visível e utilizável mesmo que a animação nunca corra.

Formato: tabela de especificação, blocos de código separados por ficheiro e uma lista de testes.

Como utilizar

  1. Descreve a interação concreta e a sensação que queres transmitir. 2. Escolhe se basta CSS ou se precisas de algum JavaScript. 3. Testa o resultado com a opção de reduzir movimento ativa no sistema e num telemóvel de gama média.

Exemplo de utilização

Elemento: cartões de produto que aparecem ao fazer scroll e botão de adicionar ao carrinho com confirmação · Sensação: subtil e profissional · Tecnologia: CSS + IntersectionObserver · Restrições: sem bibliotecas.

Exemplo de resultado

Especificação do movimento

GatilhoPropriedadesDuraçãoCurvaEstado final
O cartão entra no viewportopacity, transform300 mscubic-bezier(0.2, 0, 0, 1)Visível, no seu lugar
Clicar em «Adicionar ao carrinho»transform (escala)150 msmesma curvaÍcone de confirmação

animacoes.css

:root {
  --dur-rapida: 150ms;
  --dur-base: 300ms;
  --curva-saida: cubic-bezier(0.2, 0, 0, 1);
}

/* Só fica oculto se o JS carregou: sem JS, o conteúdo continua visível */
.js .cartao-produto {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-base) var(--curva-saida), transform var(--dur-base) var(--curva-saida);
}
.js .cartao-produto.visivel { opacity: 1; transform: none; }

.botao-carrinho { transition: transform var(--dur-rapida) var(--curva-saida); }
.botao-carrinho:active { transform: scale(0.97); }
.botao-carrinho:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.botao-carrinho[data-estado="adicionado"] .icone-check { animation: surgir var(--dur-base) var(--curva-saida); }

@keyframes surgir { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js .cartao-produto { transform: none; transition: opacity var(--dur-rapida) linear; }
  .botao-carrinho, .botao-carrinho[data-estado="adicionado"] .icone-check { transition: none; animation: none; }
}

Só se animam transform e opacity, que não provocam recálculo de layout. O IntersectionObserver acrescenta .visivel e deixa de observar cada cartão…

Dados-chave

Categoria
Programação e desenvolvimento · HTML e CSS
Tipo de resultado
Código
Nível
Intermédio
Pensado para
ChatGPT, Claude, Gemini e Microsoft Copilot
Verificado em
Pendente de verificação editorial
Variáveis
O que quero animar, Sensação pretendida, Tecnologia e Restrições
Idioma
Português
Preço
Gratuito, sem registo
Atualizado
07/11/2026

Perguntas frequentes

Porquê animar só transform e opacity?

Porque o navegador consegue animá-las sem recalcular o layout da página, normalmente na GPU. Animar width, top ou margin obriga a recalcular o layout em cada fotograma e causa solavancos.

O que é prefers-reduced-motion?

Uma media query que deteta se a pessoa pediu ao sistema para reduzir o movimento, por exemplo por enjoos ou perturbações vestibulares. Respeitá-la é uma boa prática de acessibilidade.

Para que serve este prompt?

Desenhe e programe animações CSS para botões, menus, cartões ou aparições ao fazer scroll, com especificação de movimento, desempenho fluido e alternativa para movimento reduzido.

Com que ferramentas de IA funciona?

Foi pensado para ChatGPT, Claude, Gemini e Microsoft Copilot. Ainda não o verificámos nestas ferramentas, pelo que os resultados podem variar entre elas.

Como personalizo o prompt?

Clique em “Personalizar” e preencha as variáveis (O que quero animar, Sensação pretendida, Tecnologia e Restrições). O texto atualiza-se instantaneamente e pode depois copiá-lo com um clique. Os valores ficam guardados apenas no seu navegador.

Preciso de experiência para o utilizar?

É de nível intermédio: convém conhecer o tema para fornecer bom contexto e rever o resultado com sentido crítico.

Este prompt é gratuito?

Sim. Todos os prompts do HomeCasa Prompts são gratuitos, sem registo nem subscrição. Pode também utilizá-los em projetos profissionais.

Posso confiar no resultado da IA?

Trate-o como um rascunho de qualidade: verifique sempre os dados, os números e as afirmações importantes antes de publicar ou tomar decisões.

Prompts relacionados