---
id: 587d78a8367417b2b2512ae4
title: Make a CSS Heartbeat using an Infinite Animation Count
challengeType: 0
videoUrl: ''
localeTitle: 使用无限动画计数制作CSS心跳
---
## Description
这是一个带有animation-iteration-count
属性的连续动画示例,该属性使用您在之前的挑战中设计的心脏。一秒长的心跳动画由两个动画片段组成。的heart
元件(包括:before
和:after
片)的动画使用改变大小transform
特性,并且背景div
是动画使用改变其颜色background
属性。
## Instructions
通过为back
类和heart
类添加animation-iteration-count
属性并将值设置为无限来保持心脏跳动。 heart:before
和heart:after
选择器heart:after
不需要任何动画属性。
## Tests
```yml
tests:
- text: heart
类的animation-iteration-count
属性应具有无限值。
testString: 'assert($(".heart").css("animation-iteration-count") == "infinite", "The animation-iteration-count
property for the heart
class should have a value of infinite.");'
- text: back
类的animation-iteration-count
属性应具有无限值。
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
```