Uma das inovações do CSS3 é a capacidade de criar transições e animações com comportamentos. A animação CSS3 pode ser usada em vários quadros -chave para alterar a aparência e o comportamento de um elemento. Uma animação estabelece muitos pontos de transição com base em quadros de chave distintos, enquanto as transições permitem que você vá de um estado para outro.

Ao longo deste artigo, examinaremos:

• Propriedade de transição em CSS
• Como usar a propriedade de transição no CSS?

Tudo bem, vamos começar!

O que é a propriedade de transição no CSS?

O "Property de transição”Permite -nos modificar os valores da propriedade suavemente de acordo com a duração especificada. Ocorre quando a propriedade CSS muda seu valor de um para outro sem piscar. Dependendo de seu estado, pode ser pairado ou ativo. Agora, vamos para a sintaxe da propriedade de transição.

Sintaxe

Há duas coisas que você precisa especificar ao criar um efeito de transição:

• Adicionando um efeito a uma propriedade CSS.
• Defina a duração do efeito.

Siga a sintaxe a seguir para adicionar um efeito de transição usando a propriedade de transição:

Property de transição: valor;

No local de valor, adicione um efeito da transição que você deseja aplicar.

Siga a sintaxe abaixo para adicionar o efeito de duração usando a propriedade de duração da transição:

Duração da transição: valor;

Dependendo de suas preferências, você também pode adicionar um atraso de transição e uma função de tempo.

Aqui está um exemplo em que implementamos a transição deslizante.

Como usar a propriedade de transição no CSS?

Podemos usar "Property de transição”Em qualquer elemento como div, título, botão e muito mais.

Ao usar um exemplo, vamos ver como a propriedade de transição funciona.

Exemplo: como deslizar da transição esquerda no CSS?

O exemplo a seguir, criaremos um título

dentro de :

Deslize da transição esquerda

Quando executamos esse arquivo HTML, ele mostrará o seguinte resultado:

Aqui, podemos ver que um cabeçalho simples é apresentado. Agora vamos nos mudar para a seção CSS, onde aplicar a propriedade de transição ao contêiner criado. Para esse fim, escreveremos o seguinte código:

div
Largura: 150px;
Altura: 150px;
Antecedentes: Goldenrod;
Property de transição: largura;
Duração da transição: 1s;

O bloco de código acima serve as seguintes funcionalidades:

largura e altura: O tamanho da div é “150px"Em largura e"150px" em altura.

fundo: A cor da div é definida como “Goldenrod”.

Property de transição: Definimos a propriedade de transição como largura; Com isso, ele deslizará da esquerda na transição.

duração da transição: ““1s”Ou um segundo é a duração da transição. Quando movemos o cursor para fora da div, dentro de um segundo, ele irá para o seu estado original.

Observação: Sempre que a propriedade da largura do CSS mudar, o efeito de transição começará.

Agora, pegue um novo valor para a propriedade de largura que será usada para mouse sobre o elemento div. O tamanho da propriedade de largura está definido como “500px”. Ele deslizará da esquerda para a direita quando um cursor se mover para o elemento e, quando você mover o mouse para fora do elemento, o estilo retornará gradualmente ao seu estado original:

Div: Hover
Largura: 500px;

Depois disso, vá para o arquivo html e execute -o. Ele dará a seguinte saída:

Tendo aplicado a propriedade de transição à div, agora podemos ver que está ativo.

Conclusão

No CSS, para deslizar a transição esquerda, o “Property de transição" é usado. Você pode definir o efeito da transição e sua duração usando o “Property de transição" e "duração da transiçãoPropriedades, respectivamente. Com a ajuda de um exemplo, este artigo demonstrou como a propriedade de transição é usada para deslizar da esquerda para a direita.