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.
练习题目：
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.
练习代码：
1 <style>
2 .back {
3 position: fixed;
4 padding: 0;
5 margin: 0;
6 top: 0;
7 left: 0;
8 width: 100%;
9 height: 100%;
10 background: white;
11 animation-name: backdiv;
12 animation-duration: 1s;
13 animation-iteration-count: infinite;
14 }
15
16 .heart {
17 position: absolute;
18 margin: auto;
19 top: 0;
20 right: 0;
21 bottom: 0;
22 left: 0;
23 background-color: pink;
24 height: 50px;
25 width: 50px;
26 transform: rotate(-45deg);
27 animation-name: beat;
28 animation-duration: 1s;
29 animation-iteration-count: infinite;
30 }
31 .heart:after {
32 background-color: pink;
33 content: "";
34 border-radius: 50%;
35 position: absolute;
36 width: 50px;
37 height: 50px;
38 top: 0px;
39 left: 25px;
40 }
41 .heart:before {
42 background-color: pink;
43 content: "";
44 border-radius: 50%;
45 position: absolute;
46 width: 50px;
47 height: 50px;
48 top: -25px;
49 left: 0px;
50 }
51
52 @keyframes backdiv {
53 50% {
54 background: #ffe6f2;
55 }
56 }
57
58 @keyframes beat {
59 0% {
60 transform: scale(1) rotate(-45deg);
61 }
62 50% {
63 transform: scale(0.6) rotate(-45deg);
64 }
65 }
66
67 </style>
68 <div class="back"></div>
69 <div class="heart"></div>
效果：
跳动的粉心，背景颜色会更换，变大变小
