Como ter várias transições de CSS em um elemento

Muitas plataformas on-line exigem animações em algumas páginas da web para tornar o aplicativo mais atraente. Para esse fim, os desenvolvedores usam propriedades CSS enquanto projetam as interfaces front-end. Mais especificamente, as transições de CSS significam aplicar animações em um elemento HTML através das propriedades CSS de forma que aplique automaticamente as propriedades uma após a outra.

Este artigo discutirá o método para aplicar as propriedades do CSS para ter várias transições em um elemento HTML.

Como aplicar várias transições CSS em um elemento?

Tudo o que ele exige é primeiro criar os elementos no HTML nos quais as transições precisam ser aplicadas e depois adicionar o ID CSS ou seletores de classe no elemento de estilo para se referir aos elementos HTML.

Exemplo

Vamos criar um elemento de contêiner de div no corpo do código HTML e, em seguida, aplicar as propriedades CSS nele para fazer com que pareça animado:

Passe o mouse para ver as transições

Olá usuário!!!

No trecho de código acima:

• • Um "

    ”O cabeçalho é adicionado com o CSS embutido“margem”Propriedade definida como“1 Rem”E o título diz“Passe o mouse para ver as transições”.

  • Depois disso, um “”O elemento de contêiner é adicionado à classe declarada como“minha classe”.
  • O "”Elemento de contêiner tem o texto“Olá usuário!!!”Dentro dele. As transições CSS serão aplicadas a este elemento div.

O elemento de estilo CSS deve ter todas as propriedades necessárias que fazem a div parecer animada:

.minha classe
tamanho de fonte: 3REM;
margem: 2REM;
Justify-Content: Center;
exibição: flex;
borda: 10px roxo sólido;
Largura: 20REM;
Altura: 9REM;
Transição: Color 1s Desembear, encerrar o topo 1s,
Desenvolvimento de 1s, de baixo para baixo e de tamanho de fontes;

.MyClass: Hover
cor azul;
borda: 10px laranja sólida;
Top de preenchimento: 100px;
Botting-Bottom: 40px;
Size da fonte: 1.8REM;

No elemento de estilo CSS acima:

• • Um seletor de classe é adicionado que se refere ao “minha classe”Div Container Element. Dentro dele, várias propriedades CSS são definidas para o elemento de contêiner Div.
  • O "tamanho da fonte”Propriedade define o tamanho do texto escrito no contêiner da div para“3REM”.
  • O "margem”A propriedade é adicionada para dar espaçamento de“2REM”Após o texto ou o título.
  • O "Justify-Content”Propriedade alinha o texto do contêiner Div ao centro do contêiner Div.
  • O "display-flex”A propriedade foi adicionada para alinhar automaticamente o conteúdo no elemento div.
  • O "fronteira”A propriedade é adicionada para definir o peso da fronteira do contêiner DIV como“10px”E define a cor da fronteira como“roxo”.
  • O "largura”Propriedade define o comprimento vertical do elemento div como“20rem”.
  • Da mesma forma, o “altura”Propriedade define o comprimento horizontal do elemento div como“9rem”.
  • O "transição”A propriedade é adicionada para definir o horário em que as transições precisam ser aplicadas. Para "cor","Top-top" e "Botting-Bottom", Ele foi definido como"1 segundo" e para "tamanho da fonte", Ele foi definido como"3 segundos”.
  • Depois disso, a pseudo-classe “:flutuar”É adicionado ao seletor de classe CSS“.minha classe”Para definir as propriedades do CSS a serem implementadas enquanto o usuário paira sobre o elemento criado através de“minha classe”.
  • O "cor”A propriedade é definida como“azul”Para que, quando o usuário paira sobre o elemento, ele muda imediatamente a cor do texto para azul.
  • Em seguida, o “fronteira”Propriedade foi definida que muda o tamanho da borda para“10px”Enquanto pairava e a cor das fronteiras foi definida como“laranja”.
  • O "Top-top" e "Botting-Bottom”As propriedades foram adicionadas para definir o espaçamento entre o conteúdo e as fronteiras de cima e de baixo, respectivamente.
  • O "tamanho da fonte" é definido como "8remEnquanto pairava.

Os resultados das transições de CSS aplicadas acima serão as seguintes:

Isso resume o método para aplicar várias transições CSS em um elemento HTML.

Conclusão

As transições de CSS são aplicadas aos elementos HTML para fazê -los parecer animados. Tudo o que requer para aplicar transições CSS é adicionar o ID ou o seletor de classe no elemento de estilo CSS referente ao elemento HTML no qual as transições precisam ser aplicadas e, em seguida, adicionando todas as propriedades necessárias nele, como cor, fonte, bordas, preenchimento antes e depois da transição. Este artigo orientou a aplicação de várias transições CSS em um elemento HTML.