8.1 Propriedade animation-iteration-count
Animações CSS permitem criar efeitos visuais dinâmicos, melhorando a interface do usuário. Agora vamos
considerar duas propriedades-chave que controlam os ciclos de animação: animation-iteration-count e animation-direction.
A propriedade animation-iteration-count define quantas vezes a animação será reproduzida. Esta propriedade permite
controlar se a animação será executada uma vez, várias vezes ou infinitamente.
Sintaxe:
element {
animation-iteration-count: number | infinite;
}
Onde:
number: número de reproduções da animação (por exemplo, 1, 2, 3, etc.)infinite: a animação será reproduzida infinitamente
Exemplo:
<div class="box"></div>
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-30px);
}
100% {
transform: translateY(0);
}
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
Explicação do código:
@keyframes bounce: define a animação que levanta o elemento e depois o retorna à posição originalanimation-iteration-count: infinite: define a reprodução infinita da animação
8.2 Propriedade animation-direction
A propriedade animation-direction define a direção de reprodução da animação. Ela permite especificar
se a animação será reproduzida em direção normal, reversa ou alternando ambas as direções.
Sintaxe:
element {
animation-direction: normal | reverse | alternate | alternate-reverse;
}
Onde:
normal: a animação é reproduzida em direção normal (por padrão)reverse: a animação é reproduzida em direção reversaalternate: a animação alterna entre direção normal e reversaalternate-reverse: a animação começa em direção reversa e depois alterna entre reversa e normal
Exemplo
Reprodução em direção normal e reversa:
<div class="box1"></div>
<div class="box2"></div>
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #2ecc71;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: normal;
}
.box2 {
animation-direction: reverse;
}
Explicação do código:
.box1: a animação é reproduzida em direção normal.box2: a animação é reproduzida em direção reversa
Alternância de direções:
<div class="box1"></div>
<div class="box2"></div>
@keyframes moveRight {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
.box1, .box2 {
width: 100px;
height: 100px;
background-color: #3498db;
animation-name: moveRight;
animation-duration: 2s;
animation-iteration-count: infinite;
}
.box1 {
animation-direction: alternate;
}
.box2 {
animation-direction: alternate-reverse;
}
Explicação do código:
.box1: a animação alterna entre direções normal e reversa.box2: a animação começa em direção reversa e depois alterna entre reversa e normal
8.3 Exemplo de uso de ambas as propriedades
Elemento balançante
- Este exemplo demonstra um elemento balançante que se move para a direita e para a esquerda:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Elemento Balançante</title>
<style>
@keyframes swing {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
.box {
width: 100px;
height: 100px;
background-color: #e74c3c;
animation: swing 1s infinite alternate-reverse;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
Explicação do código:
@keyframes swing: define a animação que rotaciona o elemento.box: elemento com a animaçãoswingaplicada, com duração de 1 segundo, reprodução infinita e começando em direção reversa
GO TO FULL VERSION