---
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
```