2021-06-15 14:21:20 +00:00
---
id: 587d78a8367417b2b2512ae3
2021-06-28 14:31:36 +00:00
title: Animar elementos infinitamente
2021-06-15 14:21:20 +00:00
challengeType: 0
videoUrl: 'https://scrimba.com/c/cVJDVfq'
forumTopicId: 301041
dashedName: animate-elements-continually-using-an-infinite-animation-count
---
# --description--
2021-06-28 14:31:36 +00:00
Os desafios anteriores cobriram como usar algumas das propriedades de animação e a regra `@keyframes` . Outra propriedade da animação é `animation-iteration-count` , que permite controlar quantas vezes você gostaria de repetir a animação. Um exemplo:
2021-06-15 14:21:20 +00:00
```css
animation-iteration-count: 3;
```
2021-06-28 14:31:36 +00:00
Neste caso, a animação irá parar depois de repetir 3 vezes, mas é possível fazer a animação rodar infinitamente definindo esse valor para `infinite` .
2021-06-15 14:21:20 +00:00
# --instructions--
2021-06-28 14:31:36 +00:00
Para manter a bola quicando à direita em um loop contínuo, altere a propriedade `animation-iteration-count` para `infinite` .
2021-06-15 14:21:20 +00:00
# --hints--
2021-06-28 14:31:36 +00:00
A propriedade `animation-iteration-count` deve ter um valor de `infinite` .
2021-06-15 14:21:20 +00:00
```js
assert($('#ball').css('animation-iteration-count') == 'infinite');
```
# --seed--
## --seed-contents--
```html
< style >
#ball {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff ,
#ffcccc
);
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: 3;
}
@keyframes bounce{
0% {
top: 0px;
}
50% {
top: 249px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
< / style >
< div id = "ball" > < / div >
```
# --solutions--
```html
< style >
#ball {
width: 100px;
height: 100px;
margin: 50px auto;
position: relative;
border-radius: 50%;
background: linear-gradient(
35deg,
#ccffff ,
#ffcccc
);
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes bounce{
0% {
top: 0px;
}
50% {
top: 249px;
width: 130px;
height: 70px;
}
100% {
top: 0px;
}
}
< / style >
< div id = "ball" > < / div >
```