Como definir a altura de transição no CSS

Nos aplicativos da Web, é necessário transmitir a mensagem com eficiência. Os desenvolvedores entregam seus conceitos a seus espectadores de uma maneira melhor usando animações. Para configurar propriedades diferentes da animação, como estados e velocidade, as transições são usadas. No CSS, as transições ajudam a aplicar vários efeitos sobre elementos HTML, como duração e atraso.

Como definir a altura de transição no CSS?

No CSS, a altura da transição pode ser definida usando as seguintes propriedades:

• propriedade de transição
• Transforme com propriedade de transição

Então, vamos começar com o método um!

Método 1: Defina a altura da transição usando a propriedade de transição CSS

A "transição”É um prazo definido especificando o estado inicial e final de um elemento. É a propriedade abreviada de todas as propriedades de transição e longa, como duração da transição ou propriedade de transição.

Vamos seguir em frente e dar um exemplo para entender como a propriedade de transição pode ser usada para definir a altura da transição.

Exemplo 1

Dentro do arquivo html, especifique o “”Entre tags.

Html

Primeiro, especificaremos o “cor de fundo”Propriedade com valor“laranja”. Em seguida, atribua as propriedades de altura e largura com valores “100px" e "50px”. Agora, defina o “transição”Propriedade com a“altura 1s" valor; A altura 1S especifica que o elemento executará a ação atribuída em um segundo em uma direção vertical.

Na próxima etapa, usaremos o seletor “:flutuar”Com elemento div e defina a propriedade de altura como“200px”. Isso fará com que a linha vertical se expanda de 100px a 200px quando passarmos nosso ponteiro no elemento.

CSS

div
cor de fundo: laranja;
Altura: 100px;
Largura: 50px;
transição: altura 1s;

Div: Hover
Altura: 200px;

Vamos salvar o código mencionado e executá -lo no navegador:

Como você pode ver na saída acima, a altura da transição foi definida com sucesso.

Método 2: Defina a altura da transição usando a propriedade CSS Transform

As variações 2D ou 3D que podem ser implementadas nos elementos HTML resultam do “transformar" propriedade. Você pode executar ações diferentes utilizando esta propriedade, como escala, distorção, tradução e giro. Se você não estiver ciente dessas operações mencionadas, consulte este artigo dedicado.

Exemplo

Vamos definir o valor do “transformar"Propriedade como"Scaley (1)”; Aqui, o Scaley é usado para ajustar um elemento verticalmente e passar “1”Como seu argumento aumentará a altura. Vamos definir o “Origina de transformação”Propriedade com o valor“principal”, O que indica que a transformação será aplicada a partir do ponto superior. Agora, daremos à propriedade de transição um valor “Transformar 1s, 1s”, Onde os primeiros 1s são para largura e o outro é para altura; Isso especificará a transformação de um segundo sobre o elemento selecionado.

Use o seletor: Passe e atribua à propriedade Transform a um valor “Scaley (1.1)”. Como resultado, quando o ponteiro é colocado no elemento, seu tamanho aumentará, respectivamente.

CSS

div
cor de fundo: laranja;
Altura: 100px;
Largura: 50px;
Transformar: Scaley (1);
Origin de transformação: topo;
Transição: transformar 1s, 1s;

Div: Hover
Altura: 200px;
Transformar: Scaley (1.1);

Saída

Cobrimos como definir a altura de transição no CSS.

Conclusão

Para definir a altura da transição, o “transição”A propriedade pode ser utilizada. É preciso o valor dos segundos como um argumento para executar uma ação específica por um determinado momento. Além disso, CSS “transformar”A propriedade junto com a transição também pode ser usada na qual você deve especificar a escala de transformação e a origem para alcançar os resultados desejados. Este guia demonstra todos os métodos eficientes para definir a altura de transição no CSS.