1<!DOCTYPE html>
2<html>
3<head>
4 <style>
5 .grid {
6 display: grid;
7 grid-template-columns: repeat(3, 1fr);
8 gap: 4px;
9 }
10 .box {
11 width: 20px;
12 height: 20px;
13 background-color: #333;
14 border-radius: 4px;
15 }
16 .animate {
17 animation: scale 2s infinite;
18 }
19 @keyframes scale {
20 0% {
21 transform: scale(1);
22 }
23 50% {
24 transform: scale(0.5);
25 }
26 100% {
27 transform: scale(1);
28 }
29 }
30 </style>
31</head>
32<body>
33 <div class="grid">
34 <div class="box animate" style="animation-delay: 0s;"></div>
35 <div class="box animate" style="animation-delay: 0.1s;"></div>
36 <div class="box animate" style="animation-delay: 0.2s;"></div>
37 <div class="box animate" style="animation-delay: 0.3s;"></div>
38 <div class="box animate" style="animation-delay: 0.4s;"></div>
39 <div class="box animate" style="animation-delay: 0.5s;"></div>
40 <div class="box animate" style="animation-delay: 0.6s;"></div>
41 <div class="box animate" style="animation-delay: 0.7s;"></div>
42 <div class="box animate" style="animation-delay: 0.8s;"></div>
43 </div>
44 <script>
45 // No JavaScript needed for this animation
46 </script>
47</body>
48</html>