---
id: 587d78a8367417b2b2512ae4
title: Make a CSS Heartbeat using an Infinite Animation Count
challengeType: 0
videoUrl: 'https://scrimba.com/c/cDZpDUr'
---
## Description
Here's one more continuous animation example with the animation-iteration-count
property that uses the heart you designed in a previous challenge.
The one-second long heartbeat animation consists of two animated pieces. The heart
elements (including the :before
and :after
pieces) are animated to change size using the transform
property, and the background div
is animated to change its color using the background
property.
## Instructions
Keep the heart beating by adding the animation-iteration-count
property for both the back
class and the heart
class and setting the value to infinite. The heart:before
and heart:after
selectors do not need any animation properties.
## Tests
```yml
tests:
- text: The animation-iteration-count
property for the heart
class should have a value of infinite.
testString: assert($('.heart').css('animation-iteration-count') == 'infinite', 'The animation-iteration-count
property for the heart
class should have a value of infinite.');
- text: The animation-iteration-count
property for the back
class should have a value of infinite.
testString: assert($('.back').css('animation-iteration-count') == 'infinite', 'The animation-iteration-count
property for the back
class should have a value of infinite.');
```
## Challenge Seed
## Solution
```js
// solution required
```