Introdução
Em HTML, você pode usar a propriedade de transição CSS (Transition) para criar efeitos de animação, para que as propriedades de um elemento façam uma transição suave para um novo estado dentro de um determinado período de tempo. Este tutorial apresentará em detalhes como usar transições de animação HTML e códigos de amostra.
Propriedade de transição (propriedade de transição)
As propriedades de transição são usadas para especificar propriedades CSS para transição. Você pode selecionar um ou mais atributos para transição.
-
gramática básica
.element {
transition-property: property1, property2, ...;
}
No código acima, .elementé o seletor do elemento ao qual você deseja aplicar a transição. property1, property2, ...é o nome da propriedade que você deseja alterar na transição, separado por vírgulas.
-
Transição de atributo único
.element {
transition-property: width;
}
O código acima fará com que .elementa propriedade width do elemento mude na transição. Quando a largura do elemento mudar, a transição será disparada e fará a transição suavemente para o novo valor de largura.
-
Múltiplas transições de propriedade
.element {
transition-property: width, height, opacity;
}
O código acima fará com que .elementas propriedades de largura, altura e transparência do elemento mudem na transição. Independentemente desses atributos