Gerador de CSS View Transition
Simule animações da 'View Transition API' e CSS
(::view-transition-old/new) diretamente no seu navegador.
Escolha um Preajuste
Pré-visualização
Configurações do Gerador
※ Ponto final (To) para ::view-transition-old (estado saindo)
※ Ponto inicial (From) para ::view-transition-new (estado entrando)
Código Gerado
Você também pode gostar
Visão Geral do Gerador de CSS View Transition
O Gerador de CSS View Transition é uma ferramenta gratuita que permite criar e prever animações de transição de página de forma visual usando a View Transition API.
Tradicionalmente, alcançar transições suaves exigia bibliotecas JavaScript pesadas. Agora, pode fazê-lo facilmente com CSS e o navegador. Ajuste as animações para elementos de saída e entrada e copie o código.
Todo o processamento ocorre no navegador. As suas configurações nunca são enviadas para servidores externos, garantindo privacidade e segurança.
Como Criar Animações de Transição
Escolha uma Predefinição
Selecione uma predefinição como 'Fade' ou 'Slide Left' no topo, ou insira um 'view-transition-name' para definir a base.
Pré-visualize e Ajuste
Clique em 'Reproduzir / Alternar Estado' para ver a transição real. Ajuste os parâmetros nas guias 'Old' (saída) e 'New' (entrada).
Copie e Aplique o Código
Copie o código gerado das guias 'CSS', 'JavaScript' e 'HTML' e integre-os ao seu projeto.
Glossário de View Transition
- View Transition API
- Um mecanismo onde o navegador captura automaticamente o DOM antes e depois de uma mudança, animando suavemente entre eles.
- view-transition-name
- Uma propriedade CSS para identificar os elementos a animar. Elementos com o mesmo nome são vinculados.
- ::view-transition-old / new
- `old` é um pseudo-elemento que contém a captura do estado anterior. `new` é para o novo estado.
- Cross-document View Transitions
- Permite animar transições de ecrã entre MPAs através de meta tags, sem precisar de ser uma SPA.
Perguntas Frequentes (FAQ)
- Q.Meus dados são enviados para um servidor?
- Não, esta ferramenta funciona totalmente no seu navegador. Nenhum dos seus dados é enviado para servidores externos. Funciona com segurança até offline.
- Q.A animação de View Transition funcionará em todos os navegadores?
- É compatível com Chrome 111+, Edge 111+, Safari 18+, etc. Em navegadores não compatíveis como o Firefox, ocorre uma mudança de página instantânea (melhoria progressiva) sem quebrar o site.
- Q.Posso usá-lo para MPAs (Aplicações de Múltiplas Páginas)?
- Sim, você pode usar para MPAs na mesma origem. Adicionando `<meta name="view-transition" content="same-origin" />` no `<head>` do HTML e um `view-transition-name` via CSS, você anima sem JavaScript.
- Q.O que devo usar para view-transition-name?
- Especifique qualquer string única na página. Se o mesmo nome existir em vários elementos no DOM, a animação falhará. Recomenda-se incluir IDs exclusivos para itens de lista.
Casos de Uso
Aqui estão exemplos típicos usando a View Transition API.
Detalhes do Produto no E-Commerce
Ao clicar numa miniatura, a imagem expande suavemente para os detalhes.
UI de Estilo App Nativa
Pode alcançar animações estilo app nativa diretamente no navegador. Perfeito para PWAs.
Mudança de Modo Escuro
Adicione efeitos únicos ao mudar de tema, como um círculo de cor em expansão.
Filtros em Listas
Ao filtrar, os itens removidos desaparecem enquanto os outros deslizam suavemente para as novas posições.
Enviar feedback
Deixe-nos saber sua opinião para nos ajudar a melhorar a ferramenta.
O feedback está temporariamente suspenso
O servidor está ocupado ou a proteção contra spam está ativa. Tente novamente mais tarde.