Transições no CSS

Para tornar seu design de web atraente, você precisa adicionar certas animações ao seu conteúdo. Para lidar com o comportamento dessas animações, as transições de CSS são usadas. As transições são referidas como uma mudança no estado de um elemento suavemente em uma duração especificada. Portanto, ao aplicar efeitos de transição em vários elementos CSS, você deve declarar a propriedade CSS na qual o efeito será aplicado, bem como o tempo do efeito. Especificando a duração é altamente importante ou não, não haverá efeito de transição no elemento específico.

Existem certas propriedades de transição CSS que são usadas para adicionar efeitos de transição em vários elementos, nós os explicamos em detalhes abaixo.

Propriedades de transição CSS

CSS fornece várias propriedades de transição que são as seguintes.

1. Property de transição
2. duração da transição
3. Dellay de transição
4. Função de Timing de Transição
5. transição

Todas as propriedades acima mencionadas são explicadas abaixo.

Property de transição

Esta propriedade é usada para especificar várias propriedades CSS às quais o efeito de transição deve ser aplicado.

Sintaxe

Property de transição: Nenhum | tudo | propriedade | herdar | inicial;

Todo o valor é um valor padrão que aplica o efeito de transição a todas as propriedades especificadas, enquanto o valor da propriedade especifica o nome da propriedade no qual o efeito será aplicado.

Exemplo
Suponha que você queira alterar a largura e a altura de um contêiner de div usando a propriedade de transição.

Html

Traga mouse sobre mim

Estamos simplesmente definindo um contêiner div.

CSS

div
Largura: 100px;
Altura: 90px;
Antecedentes: rosa;
Propriedade de transição: largura, altura;
Duração da transição: 2s;

Div: Hover
Largura: 250px;
Altura: 250px;

Estamos definindo a largura original da div para 100px e a altura para 90px, então estamos aplicando um efeito de transição na largura e na altura da div por 2 segundos. Especificar a duração é uma obrigação, caso contrário, a transição não se aplicará. Além disso, o efeito de transição ocorrerá quando o usuário trazer o mouse no contêiner div.

Saída

Um efeito de transição foi implementado com sucesso no contêiner div.

duração da transição

Esta propriedade especifica por quanto tempo o efeito de transição deve continuar a ocorrer. Cada propriedade pode receber uma única duração ou você pode atribuir diferentes durações a várias propriedades CSS.

Sintaxe

Duração do tempo: tempo | herdar | inicial;

O parâmetro de tempo especifica a duração do efeito de transição.

Exemplo
Suponha que você queira aumentar o tamanho da fonte e o peso de um parágrafo quando um cursor de mouse é trazido sobre ele.

Html

Traga mouse sobre mim

Nós definimos nosso parágrafo.

CSS

P
Size da fonte: 20px;
Property de transição: tamanho da fonte;
Duração da transição: 3s;

P: Hover
Size da fonte: 50px;

O código acima especifica que, quando o cursor do mouse for trazido sobre o parágrafo, o tamanho da fonte do parágrafo mudará e esse efeito ocorrerá por 3 segundos.

Saída

A propriedade de duração da transição está funcionando corretamente.

Dellay de transição

Esta propriedade especifica o atraso entre uma mudança em uma propriedade e o início do efeito de transição.

Sintaxe

Duração do tempo: tempo | herdar | inicial;

O parâmetro de tempo especifica a duração da espera antes do início do efeito de transição.

Exemplo
Suponha que você queira aplicar um efeito de transição em um elemento div após um atraso de 2 segundos, siga o exemplo abaixo.

Html

Traga mouse sobre mim

No código acima, simplesmente criamos um contêiner div.

CSS

div
Altura: 100px;
Largura: 100px;
Background-Color: rosa;
Propriedade de transição: altura;
Duração da transição: 3s;
Delado de transição: 2s;

Div: Hover
Altura: 200px;

De acordo com a parte do código acima, o efeito de transição ocorrerá após o atraso de 2 segundos.

Saída

Este é um efeito de transição com um atraso de 2 segundos.

Função de Timing de Transição

Esta propriedade é usada para definir a curva de aceleração do efeito de transição.

Sintaxe

Função de transição de tempo: facilidade | Linear | facilidade-in | Desenvolvimento | facilidade-in-out | cúbico-bezier (n, n, n, n);

Todos os parâmetros são explicados abaixo.

• facilidade: O efeito de transição ocorre de maneira lenta e rápida.
• linear: O efeito de transição terá a mesma velocidade do início ao fim.
• facilidade: O efeito de transição terá um começo lento.
• facilidade: O efeito de transição terá um final lento.
• facilidade de saída: O efeito de transição terá um começo lento e um final lento.
• cubic-bezier (n, n, n, n): Os valores do efeito de transição serão definidos de maneira cúbica.

Exemplo
Considere o exemplo abaixo.

Html

Traga mouse sobre mim

Um contêiner div foi simplesmente criado.

CSS

div
Altura: 100px;
Largura: 100px;
Background-Color: rosa;
Property de transição: largura;
Duração da transição: 2s;
Função de Timing de Transição: Linear;

Div: Hover
Largura: 200px;

De acordo com o código acima, a largura do contêiner Div mudará de maneira linear, o que significa que o efeito de transição terá a mesma velocidade do começo ao fim.

Saída

O efeito de transição está acontecendo de maneira linear.

transição

Esta propriedade é uma propriedade abreviada que é usada para definir valores para todas as propriedades de transição acima.

Sintaxe

transição: (propriedade) (duração) (função de tempo) (atraso);

Exemplo
O exemplo abaixo demonstra o funcionamento da propriedade de transição.

CSS

div
Altura: 100px;
Largura: 100px;
Background-Color: Lightsegreen;
transição: largura 0.5s linear 1s;

Div: Hover
Largura: 200px;

Usando a propriedade de transição, estamos aplicando um efeito de transição na largura para 0.5 segundos de maneira linear com um atraso de 1 seg.

Saída

A propriedade de transição está funcionando corretamente.

Conclusão

As transições são referidas como uma mudança no estado de um elemento suavemente em uma duração especificada. O CSS fornece várias propriedades de transição que são as seguintes: Properção de transição, duração da transição, atraso de transição, função de transição de tempo e transição. Todas essas propriedades são usadas para especificar o comportamento do efeito de transição que está sendo aplicado em vários elementos HTML. Neste guia, todas essas propriedades são explicadas com a ajuda de exemplos relevantes.