(Opcional) Selecione um elemento (parágrafo, título etc.) para aplicar a transição. Alternativamente, você pode criar uma transição e aplicá-la depois em um elemento.
Última atualização em
25/04/2024
É possível criar, modificar e excluir transições do CSS3 através do painel Transições do CSS.
Para criar uma transição CSS3, crie uma classe de transição especificando valores das propriedades de transição do elemento. Se você selecionar um elemento antes de criar uma classe de transição, a classe de transição será aplicada automaticamente ao elemento selecionado.
Você pode optar por adicionar o código CSS gerado ao documento atual ou especificar um arquivo CSS externo.
Criar e aplicar o efeito de transição do CSS3
Selecione Janela > Transições CSS.
Clicar 
.
Crie uma classe de transição que usa as opções na caixa de diálogo Nova transição.
Regra de destino
Insira um nome para o seletor. O seletor pode ser qualquer seletor de CSS como uma tag, uma regra, uma ID ou um seletor composto. Por exemplo, se você deseja adicionar efeitos de transição a todas as tags <hr>, insira hr
Transição ativada
Selecione um estado ao qual você deseja aplicar a transição. Por exemplo, se você deseja aplicar a transição quando o mouse se mover sobre o elemento, use a opção passar mouse.
Uso da mesma transição para todas as propriedades
Selecione esta opção se quiser especificar a mesma Duração, Atraso e Função de tempo para todas as propriedades CSS que você deseja transicionar.
Uso de uma transição diferente para cada propriedade
Selecione esta opção se quiser especificar uma Duração, Atraso e Função de Regulação de tempo diferentes para cada uma das propriedades de CSS as quais deseja a transição.
Propriedade
Clique em para adicionar uma propriedade de CSS à transição.
Duração
Insira uma duração em segundos (s) ou milissegundos (ms) para o efeito de transição.
Atraso
A hora, em segundos ou milissegundos, antes do início do efeito de transição.
Função de tempo
Selecione um estilo de transição nas opções disponíveis.
Valor final
O valor final do efeito de transição. Por exemplo, para que o tamanho da fonte aumente a 40 px ao final do efeito de transição, especifique 40 px para a propriedade font-size.
Escolha do local para criar a transição
Para incorporar o estilo no documento atual, selecione Somente este documento.
Se você deseja criar uma folha de estilo externa para o código CSS3, selecione Novo arquivo de folha de estilo. Ao clicar em Criar transição você deverá especificar um local para salvar o novo arquivo CSS. Após a folha de estilo ter sido criada, será adicionada ao menu Selecionar local para criar transição.
Editar efeitos de transição do CSS3
No painel Transições CSS, selecione o efeito de transição que deseja editar.
Clique em 
.
Use a caixa de diálogo Editar transição para alterar valores de transição que foram inseridos anteriormente.
Desativar formato abreviado do CSS para transições
Veja o que é uma propriedade abreviada de CSS? para obter mais informações sobre propriedades abreviadas de CSS e seus benefícios.
Selecione Editar > Preferências.
Selecione Estilos CSS.
Em Usar formato abreviado para, cancele a seleção Transição.
Criar belos sites no Dreamweaver
Crie, codifique e gerencie sites dinâmicos com uma ferramenta completa e eficiente.
