Normalmente, quando o valor da propriedade CSS muda, o navegador atualiza imediatamente o estilo correspondente. Por exemplo, quando o mouse passa sobre o elemento, o estilo definido através do seletor :hover será aplicado imediatamente ao elemento. Uma função de transição foi adicionada ao CSS3, por meio da qual você pode fazer a transição suave de elementos de um estilo para outro dentro de um tempo especificado, semelhante a uma animação simples, mas sem recorrer a flash ou JavaScript.
CSS fornece 5 propriedades relacionadas à transição, como segue:
Para implementar com sucesso um efeito de transição, duas coisas devem ser definidas:
(1) Propriedades de parâmetros e efeitos de transição em elementos;
(2) A duração do efeito de transição.
Dica: O efeito de transição geralmente ocorre quando o mouse passa sobre o elemento. Se a duração da transição não for definida, o efeito de transição não terá efeito porque o valor padrão do tempo de transição é 0.
1. propriedade de transição
O atributo de propriedade de transição é usado para definir o nome do atributo no elemento que participa da transição. O formato da sintaxe é o seguinte:
propriedade de transição:none|all|propriedade;
A descrição do parâmetro é a seguinte:
none: Indica que nenhum atributo participa do efeito de transição;
all: Indica que todos os atributos participam do efeito de transição;
propriedade: define uma lista de nomes de propriedades CSS que aplicam efeitos de transição. Use vírgulas para separar vários nomes de propriedades.
O código de exemplo é o seguinte:
<!DOCTYPEhtml><html><head><style>div{largura:100px;altura:100px;borda:3pxsolidblack;margem:10px0px0px10px;transição-p roperty:width,background;}div:hover{width:200px;background-color:blue;}</style></head><body><div></div></body></html>Resultados em execução:
2. duração da transição
O atributo transição-duração é usado para definir o tempo que leva para a transição (em segundos ou milissegundos).
duração da transição: tempo;
Entre eles, o tempo é o tempo que leva para completar o efeito de transição (em segundos ou milissegundos). O valor padrão é 0, o que significa que não haverá efeito.
Se houver vários atributos participando da transição, você também poderá definir o tempo de transição para esses atributos. Use vírgulas para separar vários atributos, como duração da transição: 1s, 2s, 3s;. Além disso, você também pode usar um horário para definir o tempo necessário para a transição para todas as propriedades participantes da transição. O código de exemplo é o seguinte:
<!DOCTYPEhtml><html><head><style>div{largura:100px;altura:100px;borda:3pxsolidblack;margem:10px0px0px10px;propriedade de transição:largura, background;duração da transição:.25s,1s;}div:hover{width:200px;background-color:blue;}</style></head><body><div></div></body>< /html>3. função de tempo de transição
O atributo transaction-timing-function é usado para definir o tipo de animação de transição. Os valores opcionais do atributo são os seguintes:
4. atraso de transição
O atributo de atraso de transição é usado para definir quando o efeito de transição começa. O formato da sintaxe do atributo é o seguinte:
atraso de transição: tempo;
Dentre eles, o parâmetro time é utilizado para definir o tempo de espera antes do início do efeito de transição, em segundos ou milissegundos.
5. transição
O atributo de transição é a abreviatura dos quatro atributos acima. Através deste atributo, os quatro atributos acima podem ser definidos ao mesmo tempo.
transição: propriedade de transiçãotransição-duraçãotempo de transição-funçãotransição-atraso;
No atributo de transição, propriedade de transição e duração de transição são parâmetros obrigatórios, e função de tempo de transição e atraso de transição são parâmetros opcionais. Eles podem ser omitidos se não forem necessários. Além disso, vários grupos de efeitos de transição também podem ser definidos por meio do atributo de transição. Cada grupo é separado por vírgulas. O código de exemplo é o seguinte: