É 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.

É possível escolher entre adicionar o código CSS gerado ao documento atual ou especificar um arquivo de CSS externo.

Criar e aplicar o efeito de transição do CSS3

  1. (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.

  2. Selecione Janela> Transições de CSS.

  3. Clicar .

  4. 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 você quiser especificar a mesma Duração, Atraso, e Função de Regulação de tempo para todas as propriedades de CSS as quais deseja a transição.

    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

  1. No painel Transições do CSS, selecione o efeito de transição que deseja editar.

  2. Clique em  .

  3. 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

  1. Selecione Editar > Preferências.

  2. Selecione Estilos CSS.

  3. Em Usar formato abreviado para, cancele a seleção Transição.


Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online