Artigo original: CSS Transition Examples – How to Use Hover Animation, Change Opacity, and More
Se estiver trabalhando com tecnologias para a web, como CSS, HTML e JavaScript, é importante ter um conhecimento básico sobre animações e transições em CSS.
Neste artigo, aprenderemos sobre como criar algumas animações e transições básicas usando o CSS.
Como animar um elemento com transição básica ao passar o ponteiro por cima dele
Neste exemplo, farei a opacidade de um elemento mudar quando um usuário 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 ponteiro do mouse sobre o elemento. Podemos adicionar mais de uma transição que será executada ao mesmo tempo.
Vamos adicionar uma propriedade de transformação da escala para aumentar a escala do elemento em transição.
.elem:hover {
transform: scale(1.1);
}
A transição, no entanto, não parece suave, pois não definimos a duração da transição nem usamos alguma função de tempo.
Se adicionarmos a propriedade transition, ela fará o elemento se mover mais suavemente.
.elem {
background: blueviolet;
width: 300px;
height: 150px;
margin: 20px auto;
transition: 500ms linear;
}
Vamos dividir o código em partes para ver como a propriedade transition funciona:
transition: 500ms linear;500ms: a duração da transição é em milissegundoslinear: a função de tempo
div {
transition: <propriedade> <duração> <função de tempo> <atraso>;
}Podemos adicionar mais opções como as que estão abaixo (exemplos extraídos da MDN):
#delay {
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
}O que faz esse código?
- transition-property: a propriedade que você quer animar. Pode ser qualquer elemento do CSS, como
background,height,translateY,translateXe assim por diante. - transition-duration: a duração da transição
- transition-delay: o atraso antes de a transição começar
Você pode saber mais sobre os usos diversos de transition no CSS aqui.
Como tornar as transições mais interativas usando a propriedade animation e keyframes
Podemos fazer mais com as transições do CSS para tornar essa animação mais criativa e interativa.
Como mover um elemento com keyframes
Vejamos um exemplo onde o elemento se move do ponto A para o ponto B. Usaremos 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>Abaixo, vemos o resultado:
Desta vez, usamos novas propriedades, como animation e keyframes. Usamos a propriedade animation para definir o nome da animação e a duração, e usamos keyframes para descrever como deve ser a movimentação do elemento.
animation: moveToRight 2s ease-in-out;Aqui, chamei a animação de moveToRight – mas é possível usar o nome que você quiser. A duração é de 2s , e ease-in-out é uma função de tempo.
Existem outras funções de tempo que podem ser usadas, como ease-in, linear, ease-out, que, basicamente, tornam a animação mais suave. Você pode aprender mais sobre as funções de tempo aqui (texto em inglês).
@keyframes recebe o nome da animação. Neste caso, o nome é moveToRight.
@keyframes moveToRight {
0% {
transform: translateX(0px);
}
100% {
transform: translateX(300px);
}
}keyframes executará a animação em diversas etapas. O exemplo acima usa a porcentagem para representar o intervalo ou a ordem das transições. Também podemos usar os métodos from e to, como vemos abaixo:
@keyframes moveToRight {
from {
transform: translateX(0px);
}
to {
transform: translateX(300px);
}
}from representa o ponto de início ou a primeira parte da animação.
to é o ponto final ou a última parte da animação a ser executada.
Você pode querer usar uma porcentagem em alguns casos. Por exemplo, digamos que você queira adicionar mais do que duas transições que serão executadas em sequência, como vemos abaixo:
@keyframes moveToRight {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(150px);
}
100% {
transform: translateX(300px);
}
}Você pode ser mais criativo e animar muitas propriedades ao mesmo tempo, como no exemplo abaixo:
Você pode experimentar com as propriedades e técnicas de animação no sandbox abaixo:
Há muito mais coisas que se pode fazer com os keyframes. Primeiro, vamos adicionar mais transições à nossa animação.
Como animar mais propriedades e incluí-las na transição
Desta vez, vamos animar o segundo plano e faremos o elemento se mover em um padrão quadrado. Faremos a animação rodar indefinidamente usando a propriedade infinite 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 examinar o código por partes. Primeiro, adicionamos infinite para fazer com que a animação rodasse indefinidamente.
animation: moveToLeft 5s linear infinite;Em seguida, dividimos a animação em quatro partes. A cada parte, executamos uma transição diferente e todas as animações serão executadas em uma sequência.
- Primeiro passo: defina o elemento horizontalmente para
translateX(0px)e altere o segundo plano de acordo com o 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 alterará a cor do fundo.
25% {
transform: translateX(400px);
background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}- A terceira animação moverá o elemento para baixo usando
translateYe alterará novamente a cor de fundo. - Na quarta parte, o elemento se moverá de volta para a esquerda e mudará sua cor de fundo.
- Na quinta animação, o elemento deve voltar ao seu local original.
Para encerrar
Neste artigo, tratamos de várias coisas que se pode fazer com transições em CSS. Você pode usar as transições em CSS de várias maneiras em suas aplicações para criar uma experiência de usuário melhor.
Após aprender o básico sobre animações em CSS, pode ser que você queira ir mais além e criar coisas mais complexas, que exijam a interação do usuário. Para isso, você pode usar o JavaScript ou bibliotecas de terceiros relacionadas à animação existentes.
Olá, eu sou o Said Hayani e criei o subscribi.io para ajudar criadores, blogueiros e influenciadores a aumentarem seu público por meio de uma newsletter.