6.1 Regra @keyframes
Animações CSS permitem criar efeitos visuais complexos e suaves com o mínimo de esforço. A principal ferramenta para criar animações em CSS é a regra @keyframes, que define os quadros-chave da animação e as mudanças de estilo que devem ocorrer em cada quadro.
A regra @keyframes é usada para criar uma animação definindo mudanças nas propriedades CSS em diferentes fases da execução da animação. Os quadros-chave definem quais estilos serão aplicados em determinados momentos durante o processo de animação.
Sintaxe 1:
@keyframes animation-name {
from {
/* estilos iniciais */
}
to {
/* estilos finais */
}
}
Sintaxe 2:
@keyframes animation-name {
0% {
/* estilos iniciais */
}
100% {
/* estilos finais */
}
}
Onde:
fromcorresponde a0%do tempo da animaçãotocorresponde a100%do tempo da animação
Exemplo: Mudança suave de cor de fundo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Animation Example</title>
<style>
@keyframes changeColor {
from {
background-color: lightblue;
}
to {
background-color: lightcoral;
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: changeColor 3s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Hover over me!</div>
</body>
</html>
Explicação:
- a regra
@keyframes changeColordefine uma animação que altera a cor de fundo do elemento delightblueparalightcoral - a propriedade
animationno elemento.animated-boxespecifica que a animaçãochangeColordeve durar 3 segundos e se repetir infinitamente
6.2 Vários quadros-chave
Você pode usar mais de dois quadros-chave para criar animações mais complexas, definindo estilos para estados intermediários.
Exemplo: Movimento diagonal com mudança de cor
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Keyframes Example</title>
<style>
@keyframes moveAndChangeColor {
0% {
background-color: lightblue;
transform: translate(0, 0);
}
50% {
background-color: lightgreen;
transform: translate(100px, 100px);
}
100% {
background-color: lightcoral;
transform: translate(200px, 0);
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: moveAndChangeColor 5s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Watch me move!</div>
</body>
</html>
Explicação:
A regra @keyframes moveAndChangeColor define uma animação que altera a cor de fundo e a posição do elemento em três etapas.
- No 0% do tempo da animação, o elemento tem cor azul claro e está na posição inicial
- No 50% do tempo da animação, o elemento tem cor verde claro e se move 100 pixels para a direita e para baixo
- No 100% do tempo da animação, o elemento tem cor coral claro e se move 200 pixels para a direita
6.3 Exemplos de animações simples
Exemplo 1: Pulsações
Criando um efeito de pulsação, em que o elemento aumenta e diminui suavemente.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulsing Effect</title>
<style>
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.pulse-box {
width: 150px;
height: 150px;
background-color: lightpink;
animation: pulse 2s infinite;
}
</style>
</head>
<body>
<div class="pulse-box">Pulsing</div>
</body>
</html>
Explicação:
- a regra
@keyframes pulsedefine uma animação que aumenta o elemento para 120% e retorna ao tamanho original - a propriedade
animationno elemento.pulse-boxespecifica que a animaçãopulsedeve durar 2 segundos e se repetir infinitamente
Exemplo 2: Rotação
Criando um efeito de rotação contínua do elemento:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Effect</title>
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-box {
width: 100px;
height: 100px;
background-color: lightseagreen;
animation: rotate 3s infinite linear;
}
</style>
</head>
<body>
<div class="rotate-box">Rotating</div>
</body>
</html>
Explicação:
- a regra
@keyframes rotatedefine uma animação que rotaciona o elemento de 0 a 360 graus -
a propriedade
animationno elemento.rotate-boxespecifica que a animaçãorotatedeve durar 3 segundos, repetir-se infinitamente e ocorrer a uma velocidade constante (linear)
GO TO FULL VERSION