Com o objetivo de embelezar seu design na web, adicionar animações é altamente recomendado. As animações são referidas como uma mudança suave no estilo de elemento. CSS permite que você adicione animações a vários elementos com grande facilidade.

Ao aplicar animações a vários elementos CSS, você deve declarar alguns quadros -chave para a animação. O @KeyFrames A regra especifica que um elemento mudará seu estilo atual para o especificado em momentos específicos. Além disso, você precisa anexar uma animação a um elemento específico para a animação funcionar.

Existem várias propriedades de animação CSS que são usadas com o objetivo de adicionar animações a vários elementos do CSS, discutimos essas propriedades abaixo.

Propriedades de animação CSS

CSS fornece várias propriedades de animação que são explicadas em detalhes abaixo.

nome da animação

Esta propriedade é usada para definir um nome para os @keyframes.

Sintaxe

Nome da animação: Nenhum | keyframeName | inicial | herdar;

O keyframename O parâmetro define um nome para o quadro -chave que você deseja anexar a um elemento.

Exemplo
Considere o exemplo abaixo para entender como essa propriedade funciona.

Html

Olá Mundo

Aqui nós definimos um

elemento no qual aplicaremos o efeito de animação.

CSS

P
tamanho da fonte: 30px;
Posição: relativa;
Animação-Nome: Animação;
Animação-duração: 5s;

@KeyFrames Animation
de esquerda: 0px;
para esquerda: 200px;

Antes de aplicar o efeito de animação, primeiro definimos o tamanho da fonte e a posição do parágrafo. Mais tarde, atribuímos um nome aos quadros -chave e usando a regra @KeyFrames, estamos definindo que a animação fará com que o parágrafo se mova de 0px para 200px da esquerda.

Observe que é importante definir a duração da animação, caso contrário, não funcionará.

Saída

A animação está funcionando corretamente.

duração da animação

Esta propriedade define o tempo que uma animação deve levar para terminar um ciclo.

Sintaxe

Animação-Duração: Tempo | inicial | herdar;

O parâmetro de tempo define o tempo da animação.

Exemplo
Aqui está como você pode definir a duração de uma animação.

Html

Simplesmente definimos um elemento div.

CSS

div
Largura: 100px;
Altura: 100px;
Background-Color: Brown;
Posição: relativa;
Animação-Nome: Animação;
Animação-duração: 3s;

@KeyFrames Animation
de esquerda: 0px;
para esquerda: 200px;

Além de estilizar o contêiner Div, definimos a duração da animação para 3 segundos. Isso significa que a animação continuará jogando por 3 segundos.

Saída

A animação está sendo tocada por 3 segundos.

Animação-Dellay

Esta propriedade define o período de espera antes do início da animação.

Sintaxe

Animação-Delay: Time | inicial | herdar;

O parâmetro de tempo define o tempo de espera antes do início da animação, no entanto, é opcional.

Exemplo
Suponha que você queira atrasar sua animação por 2 segundos e siga o código abaixo.

CSS

div
Largura: 100px;
Altura: 100px;
Background-Color: Brown;
Posição: relativa;
Animação-Nome: Animação;
Animação-duração: 5s;
Animação-Delay: 2s;

@KeyFrames Animation
de esquerda: 0px;
para esquerda: 200px;

O código acima especifica que o contêiner Div passará de 0px para 200px da esquerda por 5 segundos após um período de espera de 2 segundos.

Saída

A animação foi adiada por 2 segundos e depois começou como desejado.

Função de animação-timing

Esta propriedade define a curva de aceleração da animação.

Sintaxe

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

Todos os parâmetros são explicados abaixo.

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

Exemplo
O exemplo abaixo mostra o parâmetro de facilidade da propriedade em discussão.

CSS

div
Animação-Nome: Animação;
Animação-duração: 5s;
Função de animação-timing: facilidade;

@KeyFrames Animation
de esquerda: 0px;
para esquerda: 200px;

Definimos o valor da função de animação-timing para facilitar, portanto, a animação ocorrerá de uma maneira lenta e rápida.

Saída

A animação está tocando de maneira lenta e rápida.

Contagem de animação-aladeração

Esta propriedade define quantas vezes uma animação vai tocar.

Sintaxe

Count de animação-aleragem: Número | Infinito | inicial | herdar;

O parâmetro número define o número de vezes que uma animação será reproduzida, enquanto isso, o parâmetro infinito define que a animação jogará infinitamente.

Exemplo
Vamos entender o funcionamento da propriedade de contagem de animação-aladeração usando o seguinte exemplo.

CSS

div
Animação-Nome: Animação;
Animação-duração: 5s;
Count de animação-aleragem: 2;

@KeyFrames Animation
de top: 0px;
para top: 100px;

O código acima define que a animação fará com que o contêiner DIV mova de 0px para 100px do topo por 5 segundos duas vezes.

Saída

A animação está sendo tocada duas vezes conforme especificado no código.

Direcção de animação

Esta propriedade define a direção em que a animação se moverá. As direções podem ser para frente, para trás ou alternar entre os dois.

Sintaxe

Animação-Direcção: Normal | reverso | alternativo | alternativo-reverso | herdar | inicial;

Todos os parâmetros são explicados abaixo.

• normal: Este é um parâmetro padrão que reproduz a animação.
• reverter: Este parâmetro reproduz a animação na direção inversa.
• alternar: Este parâmetro reproduz a animação primeiro na direção direta e depois na direção inversa.
• alternativo-reverso: Este parâmetro reproduz a animação primeiro na direção inversa e depois na direção da frente.

Exemplo
O exemplo abaixo demonstra o parâmetro alternativo-reverso da propriedade de direção de animação.

Html

Olá Mundo

Nós criamos um título.

CSS

H1
cor marrom;
Posição: relativa;
Animação-Nome: Animação;
Animação-duração: 3s;
Contagem de Animação-Merada: Infinita;
Direcção de animação: alternativa-reversa;

@KeyFrames Animation
de esquerda: 0px; cor marrom;
para esquerda: 100px; cor amarela;

O código acima afirma que o cabeçalho se moverá infinitamente por 3 segundos de 0px a 100px da esquerda em uma moda alternativa-reversa entre as cores marrom e amarelo.

Saída

A propriedade de direção de animação foi implementada com sucesso.

Modo de preenchimento de animação

Esta propriedade define o estilo de um elemento no momento em que a animação não está tocando. Isso significa que estilo o elemento terá antes do início da animação, depois de terminar, ou ambos.

Sintaxe

Modo de fila de animação: Nenhum | para a frente | para trás | ambos | herdar | inicial;

Todos os parâmetros são explicados abaixo.

• nenhum: Este é um parâmetro padrão que dá estilo ao elemento antes ou depois da animação ocorre.
• atacante: Este parâmetro mantém o estilo de um elemento definido pelo último quadro -chave.
• para trás: Este parâmetro mantém o estilo de um elemento definido pelo primeiro quadro de chave e se mantém nesse estilo durante o tempo de atraso da animação.
• ambos: Este parâmetro muda entre os parâmetros para frente e para trás.

Exemplo
Vamos ver como o parâmetro de encaminhamento funciona seguindo o exemplo abaixo.

Html

Simplesmente criamos um contêiner div.

CSS

div
Largura: 100px;
Altura: 100px;
Background-Color: Brown;
Posição: relativa;
Animação-Nome: Animação;
Animação-duração: 3s;
Modo de preenchimento de animação: Forwards;

@KeyFrames Animation
de esquerda: 0px;
para esquerda: 100px; Background-Color: Amarelo;

No código acima, definimos a propriedade de moda de animação para encaminhar o parâmetro, portanto, o contêiner Div reterá o estilo especificado no último quadro de chave quando a animação estiver parada e não jogando.

Saída

O contêiner Div tem uma cor amarela de fundo quando a animação é interrompida e não jogando.

Animação-Play-State

Esta propriedade define se a animação está executando ou parada.

Sintaxe

Animação-Play-State: Running | parado | herdar | inicial;

O correndo O parâmetro é um valor padrão que especifica que a animação está executando, enquanto isso parou O parâmetro especifica que a animação está em pausa.

Exemplo
Suponha que você queira pausar uma animação usando a propriedade Animation-Play-State. Aqui está como você faz isso.

CSS

div
Animação-Nome: Animação;
Animação-duração: 3s;
Animação-Play-State: parado;

@KeyFrames Animation
de esquerda: 0px;
para esquerda: 100px;

O código acima especifica que a animação será em pausa.

Saída

A animação foi parada com sucesso.

animação

Esta propriedade é uma propriedade abreviada para todas as propriedades acima.

Sintaxe

animação: ;

Exemplo
Considere o exemplo abaixo para entender a propriedade de animação.

CSS

div
Animação: Animação 3s Infinita Alternativa;

@KeyFrames Animation
de esquerda: 0px; Background-Color: Brown;
para esquerda: 200px; Background-Color: Amarelo;

Estamos especificando que a animação jogará infinitamente por 3 segundos de maneira alternativa.

Saída

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

Conclusão

As animações são referidas como uma mudança gradual no estilo de um elemento. O CSS fornece várias propriedades de animação que são as seguintes: nome de animação, duração da animação, delay de animação, animação-timing-função, contagem de animação-ex-alffeto, direção de animação, moda de animação e preenchimento de animação, estado-tate, e animação. Todas essas propriedades são usadas para especificar o comportamento do efeito de animação que está sendo aplicado em vários elementos HTML. Neste guia, todas essas propriedades são explicadas com a ajuda de exemplos relevantes.