CSS Transição múltiplas propriedades

“A transição é definida quando alguns objetos mudam de um estado para outro ou têm alguma animação. Quando aplicamos transições em qualquer elemento no CSS, ele controla a velocidade de animação. Quando queremos alterar o tamanho de um objeto e quando queremos mudar a velocidade do objeto depois de pairar sobre ele, usamos a propriedade de transição no CSS. Temos propriedades de transição diferentes no CSS. Podemos definir a largura, a altura e o tempo de animação dentro da propriedade de transição. Também podemos definir o tempo de atraso nesta propriedade de transição. Em outras palavras, é o movimento do objeto quando o mouse é desencadeado sobre esse objeto. Neste tutorial, demonstraremos o conceito de propriedade de transição no CSS. Usaremos as propriedades de transição aqui neste tutorial e as explicaremos.”

Exemplo 1
Inicie este código criando o arquivo html primeiro. Estamos abrindo o novo arquivo e selecionando o HTML como o idioma no código do Visual Studio; Devemos colocar o “!”Dentro do arquivo que criamos aqui. Todas as tags básicas do HTML aparecem neste arquivo. Só precisamos digitar o corpo do HTML e o link do arquivo CSS dentro do “Head.”Aqui, no corpo, primeiro criamos um título e depois um parágrafo. Após este parágrafo, estamos criando uma div vazia aqui. Usaremos este código HTML em nossos próximos exemplos também. Agora, estaremos nos movendo em direção ao arquivo CSS para mais codificação. Aplicaremos as propriedades de transição nesta div no arquivo CSS.

Primeiro, definimos o "div" e sua "largura" é "100px" e "100px" para a "altura."Em seguida, defina seu" fundo "como" roxo."O" raio de fronteira "desta div é" 50%", então aparecerá como um círculo. Depois de todas essas propriedades, aplicaremos a propriedade "transição" e colocará "largura" e "2s" aqui. Aplica o efeito de transição na largura da div e anima para 2seg. Depois disso, usamos o "passe" com o "div", então, quando passamos por essa div, ele mudará sua largura para "300px", pois selecionamos "300px" como "largura.”

A saída deste código mostra como a propriedade de transição muda na largura do elemento div. Você pode ver neste vídeo dado que sua largura aumenta quando passamos o mouse sobre esse círculo div. Quando o mouse não terminar esse elemento, ele voltará à posição original.

Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/transition-property-profile-1-microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Use as teclas de seta para cima/para baixo para aumentar ou diminuir o volume.

Exemplo # 2
Aqui, vamos aplicar a propriedade de transição à largura e altura. A "largura" da div é "120px" e a "altura" também é a mesma "120px". O "fundo" da div está na cor "laranja", e seu "raio de borda" é "30%" neste exemplo. Estamos usando a propriedade "Transição" aqui, que muda sua "largura" com uma duração de tempo de "2s" e muda sua "altura" com uma duração de tempo de "4s". Todas essas transições são aplicadas quando acionamos o mouse sobre esse elemento div. Nós também usamos o “div.Paur. Definimos o "320px" para a "largura" quando passamos por ele e o
“Altura” de 320px ”.

Neste vídeo fornecido, você pode ver a saída deste exemplo. Você pode ver que, quando passamos o mouse nesse elemento div, ele muda sua largura e sua altura, porque definimos largura e altura na propriedade CSS de transição.

Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/transition-property-profile-1-microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Use as teclas de seta para cima/para baixo para aumentar ou diminuir o volume.

Exemplo # 3
Aqui, vamos usar todas as propriedades de transição separadamente na div. Definimos a "largura" e "altura" primeiro, e ambos estão em "130px". Então estamos escolhendo "rosa" como o "fundo" da div. Seu "raio de borda" é "20%". Agora, temos as propriedades de transição aqui. Primeiro, definimos a “propriedade de transição” e damos o nome em que a transição é empregada. Então, aqui definimos a "largura" nesta propriedade. Vamos definir o tempo em propriedades de transição separadas. Para definir o horário da transição, usamos a propriedade "Duração da transição" e dedicamos o tempo aqui nesta propriedade. Definimos “2s” para esta “property de tempo de tempo.”

Depois disso, temos a propriedade "transição de financiamento". Esta propriedade é usada aqui para especificar a velocidade da transição. Aqui, definimos como "linear", o que significa que a velocidade do efeito de transição será a mesma do início ao fim. Em seguida, também aplicamos algum atraso nessa transição usando a propriedade "transição-dellay". Definimos esse valor de propriedade como "1s". Produzirá um atraso de "1seg" para o efeito de transição. Usamos todas as propriedades de transição aqui neste código separadamente. Depois de tudo isso, definimos a "largura" da div quando o mouse. Depois de passar o mouse, muda sua largura para "350px".

A saída é mostrada aqui no vídeo. Você pode ver que, quando o mouse o mouse sobre essa div, é preciso um atraso de 1seg e depois aplica a transição em sua largura, e a largura muda de maneira linear, o que significa a uma velocidade constante do início a fim.

Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/transition-property-profile-1-microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Use as teclas de seta para cima/para baixo para aumentar ou diminuir o volume.

Exemplo # 4
Neste exemplo, estamos usando a propriedade abreviada de todas as propriedades que usamos em nosso exemplo anterior 3 neste tutorial. A "largura" e "altura" são definidas aqui como "150px" para cada um, e o "fundo" é "rosa.”Então, estamos usando a propriedade de transição abreviada na qual especificamos a“ propriedade de transição ”,“ duração da transição ”,“ função de transição de tempo e “atraso de transição” em uma propriedade “transição”. Aqui, a "largura" especifica que a transição é aplicada na "largura" da div, e a duração da transição é "2s" e na função de tempo "linear" da transição e um atraso de 1 s na transição. Todas essas propriedades são definidas aqui em uma propriedade. Então, também é chamado de propriedade abreviada da transição. Também definimos a "largura" desta div depois de pairar sobre o mouse.

O vídeo de saída mostra que, quando movemos o mouse sobre isso, é preciso um atraso de 1 segundo antes de aplicar a transição à sua largura, que muda linearmente do início para o fim.

Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/transition-property-profile-1-microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Use as teclas de seta para cima/para baixo para aumentar ou diminuir o volume.

Exemplo # 5
Estamos criando vários elementos div aqui com nomes diferentes e aplicaremos diferentes propriedades de função de transição de tempo. Criamos cinco elementos diferentes aqui neste código.

A "largura" e "altura" de todos os elementos div são "100px" para cada. Aplicamos a "transição" na "largura" na duração do tempo de "2s". Também alinhamos o texto que está escrito dentro da div em "Centro", utilizando a propriedade "Text-Align" e definindo "Bold" para este "peso da fonte.”Então, vamos mencionar a primeira div com a ajuda do nome da divisão e usar a propriedade“ Transição-Tempo-Função ”para esta div e definir“ linear ”para esta div. Então, ele mostra a mesma velocidade do início ao fim. O "fundo" de "div1" é "vermelho.”

Para a segunda div, “div2”, estamos usando “facilidade” para a “função de transição de tempo."Essa" facilidade "começará a fazer a transição lentamente, depois rapidamente e termina lentamente. O "fundo" de "div2" é "verde.”Para a terceira div,“ div3 ”, usamos um fundo“ azul ”e estamos definindo“ facilidade ”como o valor da“ função de transição de tempo."A" facilidade "é usada para fazer o efeito de transição começar lentamente. A quarta div tem um "fundo" amarelo "e" facilidade "para esta propriedade. A transição de "facilidade de saída" termina lentamente. A última div usa "facilidade de fora" em "Funcionário de Timing de Transição" e começará e terminará lentamente. Além disso, o "fundo" da última div é "marrom.”

No vídeo, temos cinco elementos diferentes com diferentes "função de transição de tempo" e você pode notar neste vídeo que o momento da transição de todos os elementos div é diferente.

Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/transition-property-profile-1-microsoft -Edge-2022-06-12-15-45-12.MP400: 0000: 0000: 11 Use as teclas de seta para cima/para baixo para aumentar ou diminuir o volume.

Conclusão

Fornecemos este tutorial explicando o conceito de propriedades de transição no CSS. Nós abordamos este tópico em detalhes neste tutorial. Explicamos as propriedades de propriedade, duração da transição, função de transição de tempo e atraso de transição separadamente e a propriedade abreviada dessas propriedades aqui. Passamos mais de cinco exemplos diferentes e fornecemos as saídas de vídeo para que você verifique como essa propriedade funciona. Espero que você entenda as múltiplas propriedades de transição no CSS e faça você mesmo.