Como animar um elemento com transição básica ao passar o mouse
Neste exemplo, faremos a opacidade de um elemento mudar quando um usuário passar ou passar o mouse sobre o elemento.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> </head> <style> .elem { background: blueviolet; width: 300px; height: 150px; } .elem:hover { opacity: 0.5; } </style> <body> <div class="elem"></div> </body></html>
Esta é uma transição simples que pode ser acionada quando passamos o mouse sobre o elemento. Podemos adicionar mais de uma transição que será executada ao mesmo tempo.
Vamos adicionar uma propriedade de transformação de escala para adicionar uma transição de escala ao elemento.
.elem:hover { transform: scale(1.1); }
Mas a transição não parece ser suave, porque não definimos a duração da transição ou usamos qualquer função de tempo.
Se adicionarmos o transition , isso fará com que o elemento se mova com mais suavidade.
.elem { background: blueviolet; width: 300px; height: 150px; margin: 20px auto; transition: 500ms linear; }
Vamos analisar como funciona a propriedade de transição:
transition: 500ms linear;500ms: a duração da transição em milissegundoslinear: a função de tempo
div { transition: <property> <duration> <timing-function> <delay>;}Podemos adicionar mais opções como abaixo (exemplos do MDN):
#delay { transition-property: font-size; transition-duration: 4s; transition-delay: 2s;}Então, o que esse código está fazendo?
- propriedade de transição: a propriedade que você deseja animar. Pode ser qualquer elemento CSS como
background,height,translateY,translateX, e assim por diante. - duração da transição: a duração da transição
- atraso de transição: o atraso antes do início da transição
Você pode aprender mais sobre os diferentes usos de transition em CSS aqui.
Como tornar as transições mais interativas usando a propriedade de animação e quadros-chave
Podemos fazer mais com as transições CSS para tornar esta animação mais criativa e interativa.
Como mover um elemento com quadros-chave
Vejamos um exemplo em que o elemento se move do ponto A ao ponto B. Estaremos usando translateX e translateY.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> </head> <style> .elem { background: orange; width: 300px; height: 150px; animation: moveToRight 2s ease-in-out; animation-delay: 1000ms; } @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } } </style> <body> <div class="elem"></div> </body></html>E é isso que obtemos:
Desta vez, usamos novas propriedades como animação e quadros-chave. Usamos o animation para definir o nome e a duração da animação, e os quadros-chave permitem descrever como o elemento deve se mover.
animation: moveToRight 2s ease-in-out;Aqui eu chamei a animação moveToRight – mas você pode usar qualquer nome que quiser. A duração é 2s , e ease-in-out é uma função de tempo.
Existem outras funções de tempo que você pode usar, como ease-in, linear, ease-out o que basicamente torna a animação mais suave. Você pode aprender mais sobre o funções de tempo aqui.
@keyframes leva o nome da animação. Neste caso é moveToRight.
@keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } }keyframes irá executar a animação em etapas múltiplas. O exemplo acima usa uma porcentagem para representar o intervalo ou a ordem das transições. Também poderíamos usar o from e to métodos. como abaixo “
@keyframes moveToRight { from { transform: translateX(0px); } to { transform: translateX(300px); } }from representa o ponto de partida ou a primeira etapa da animação.
to é o ponto final ou a última etapa da animação a ser executada.
Você pode querer usar uma porcentagem em alguns casos. Por exemplo, digamos que você queira adicionar mais de duas transições que serão executadas em uma sequência, como a seguir:
@keyframes moveToRight { 0% { transform: translateX(0px); } 50% { transform: translateX(150px); } 100% { transform: translateX(300px); } }Podemos ser mais criativos e animar muitas propriedades ao mesmo tempo, como no exemplo a seguir:
Você pode brincar com propriedades e técnicas de animação na caixa de areia aqui:
Eles são muito mais coisas que podemos fazer com os quadros-chave. Primeiro, vamos adicionar mais transições à nossa animação.
Como animar mais propriedades e incluí-las na transição
Desta vez, vamos animar o fundo e fazer o elemento se mover em um padrão quadrado. Faremos a animação funcionar para sempre usando o infinite propriedade como uma função de tempo.
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Static Template</title> </head> <style> .elem { background: orange; width: 250px; height: 250px; border-radius: 10px; animation: moveToLeft 5s linear infinite; animation-delay: 1000ms; } @keyframes moveToLeft { 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); } 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); } 50% { transform: translateY(200px) translateX(400px); background: linear-gradient(to top, #30cfd0 0%, #330867 100%); } 75% { transform: translateX(0px) translateY(200px); background: linear-gradient(120deg, #f6d365 0%, #fda085 100%); } 100% { transform: translateY(0px); } } </style> <body> <div class="elem"></div> </body></html>Vamos decompô-lo. Primeiro nós adicionamos infinite para fazer a animação funcionar para sempre.
animation: moveToLeft 5s linear infinite;E então dividimos a animação em quatro etapas. Em cada etapa, executaremos uma transição diferente e toda a animação será executada em uma sequência.
- Primeira etapa: defina o elemento horizontalmente para
translateX(0px)e altere o plano de fundo para gradiente.
0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); }- A segunda animação moverá o elemento da esquerda para a direita e mudará a cor de fundo.
25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); }- A terceira animação moverá o elemento para baixo usando
translateYe mude a cor de fundo novamente. - Na quarta etapa, o elemento se moverá de volta para a esquerda e mudará a cor de fundo.
- Na quinta animação, o elemento deve voltar ao seu lugar original.
Empacotando
Neste artigo, abordamos várias coisas que você pode fazer com as transições CSS. Você pode usar as transições CSS de várias maneiras em seus aplicativos para criar uma melhor experiência do usuário.
Depois de aprender o básico das animações CSS, você pode querer ir além e fazer coisas mais complexas que requerem interação do usuário. Para isso, você pode usar JavaScript ou qualquer biblioteca de animação de terceiros por aí.
Olá, meu nome é Said Hayani que criei subscribi.io para ajudar criadores, blogueiros e influenciadores a aumentar seu público por meio do boletim informativo.