““transição”É uma propriedade CSS que define o método mais fácil de controlar a velocidade da animação quando o valor do CSS muda de um valor para outro. A transição pode ser implementada no CSS “mostrar" propriedade. A propriedade Display é utilizada para controlar o layout de um elemento, incluindo layout de fluxo, grade, flex e muito mais.

Esta postagem examinará como aplicar transições usando a propriedade CSS Display.

Como aplicar transições na propriedade "Display" CSS?

Os usuários não podem aplicar transições diretamente no CSS “mostrar" propriedade. No entanto, existe uma maneira alternativa de aplicar transições na propriedade Display. Para esse fim, passe pelo procedimento abaixo mencionado.

Etapa 1: faça um contêiner ""

Primeiro, crie um recipiente de div usando o “”Tag junto com a classe designada com um valor específico.

Etapa 2: adicione um título

Em seguida, insira um título utilizando qualquer "

" para "

" Tag. Por exemplo, "

”Adiciona um título.

Etapa 3: Adicione dados à lista

Para inserir os dados na forma de uma lista, use o “

" marcação:

Lista de animais de estimação

Galinha

Pato

Cachorro

Gato

Coelho

A saída do código acima mencionado é o seguinte:

Agora, siga em direção à seção CSS para estilizar a lista.

Etapa 4: estilo “.PET-AMAL ”elemento

Acesse o "”Elemento com a ajuda da classe designada“.animal de estimação”E aplique as propriedades listadas:

.animal de estimação
borda: 2px rgb pontilhado (230, 15, 15);
margem: 50px;
Background-Color: RGB (252, 239, 169);

Aqui:

• ““fronteira”A propriedade é usada para especificar o limite ao redor do elemento.
• ““margem”Define o espaço ao redor do limite do elemento.
• ““cor de fundo”Aloca uma cor na parte traseira do elemento.

A imagem resultante mostra a saída do código acima:

Etapa 5: Lista adicionada ao estilo "Li"

Agora, acesse a lista do “div”Contêiner com classe“animal de estimação" usando ".pet-animal> li”E aplique as propriedades abaixo mencionadas:

.pet-animal> li
Visibilidade: escondida;
Opacidade: 0.2;
transição: visibilidade 0s, opacidade 0.5s linear;

Aqui:

• O "visibilidade”CSS é utilizado para definir a visibilidade do elemento sem alterar o layout de um documento, como oculto ou visível.
• ““opacidade”Especifica a transparência de um elemento.
• ““transição”Permite que os usuários alterem os valores das propriedades sem problemas em uma determinada duração:

Etapa 6: aplique a aula de pseudo

Agora, aplique o “flutuarPropriedade na lista:

.pet-animal: hover> li
visibilidade: visível;
opacidade: 1;

O ":flutuar”CSS é uma pseudo-classe que faz alterações no tempo de execução quando o ponteiro do mouse é movido sobre o elemento. Tornar uma lista visível usando o “visibilidade”E defina a transparência usando o“opacidade”Propriedades do CSS para a lista no Hover:

Pode -se observar que aplicamos com sucesso a transição no “mostrar" propriedade.

Conclusão

A transição CSS não pode ser aplicada diretamente ao “mostrar" propriedade. No entanto, pode ser aplicado de maneira alternativa. Para fazer isso, adicione a tag da lista no documento HTML, acesse a lista por nome da tag e aplique “transição","opacidade", e "visibilidade”Propriedades do CSS na lista. Então, utilize o “: flutuar”Pseudo-classe e define o valor da visibilidade como“visível”. Este post explicou como a transição é aplicada à propriedade CSS Display.