← back to Only CSS: Flex Breezecompare with ground truth →
model output
LLaMA 4 Scout
Only CSS: Flex Breeze
A 0.40T 0.30
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Breeze Animation</title>
7 <style>
8 .breeze {
9 position: relative;
10 width: 400px;
11 height: 200px;
12 font-size: 24px;
13 text-align: center;
14 }
15 .bars {
16 position: absolute;
17 top: 50%;
18 left: 50%;
19 transform: translate(-50%, -50%);
20 display: flex;
21 }
22 .bar-group {
23 display: inline-block;
24 margin: 0 10px;
25 }
26 .bar {
27 width: 5px;
28 margin: 0 2px;
29 background-color: #0097a7;
30 animation: breeze-animation 8s infinite;
31 }
32 .bar-group:nth-child(1) .bar {
33 background-color: #0097a7;
34 animation-delay: 0s;
35 }
36 .bar-group:nth-child(2) .bar {
37 background-color: #ffc5c5;
38 animation-delay: 0.133s;
39 }
40 .bar-group:nth-child(3) .bar {
41 background-color: #3e8e41;
42 animation-delay: 0.266s;
43 }
44 @keyframes breeze-animation {
45 0% {
46 height: 20px;
47 transform: translateY(180px);
48 }
49 12.5% {
50 height: 80px;
51 transform: translateY(120px);
52 }
53 25% {
54 height: 140px;
55 transform: translateY(60px);
56 }
57 37.5% {
58 height: 180px;
59 transform: translateY(20px);
60 }
61 50% {
62 height: 200px;
63 transform: translateY(0px);
64 }
65 62.5% {
66 height: 180px;
67 transform: translateY(20px);
68 }
69 75% {
70 height: 140px;
71 transform: translateY(60px);
72 }
73 87.5% {
74 height: 80px;
75 transform: translateY(120px);
76 }
77 100% {
78 height: 20px;
79 transform: translateY(180px);
80 }
81 }
82 </style>
83</head>
84<body>
85 <div class="breeze">BREEZE
86 <div class="bars">
87 <div class="bar-group">
88 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out;"></div>
89 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.1s;"></div>
90 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.2s;"></div>
91 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.3s;"></div>
92 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.4s;"></div>
93 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.5s;"></div>
94 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.6s;"></div>
95 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.7s;"></div>
96 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.8s;"></div>
97 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.9s;"></div>
98 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 1s;"></div>
99 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 1.1s;"></div>
100 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 1.2s;"></div>
101 </div>
102 <div class="bar-group">
103 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out;"></div>
104 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.1s;"></div>
105 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.2s;"></div>
106 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.3s;"></div>
107 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.4s;"></div>
108 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.5s;"></div>
109 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.6s;"></div>
110 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.7s;"></div>
111 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.8s;"></div>
112 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.9s;"></div>
113 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 1s;"></div>
114 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 1.1s;"></div>
115 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 1.2s;"></div>
116 </div>
117 <div class="bar-group">
118 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out;"></div>
119 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.1s;"></div>
120 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.2s;"></div>
121 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.3s;"></div>
122 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.4s;"></div>
123 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.5s;"></div>
124 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.6s;"></div>
125 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.7s;"></div>
126 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.8s;"></div>
127 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 0.9s;"></div>
128 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 1s;"></div>
129 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 1.1s;"></div>
130 <div class="bar" style="animation-duration: 8s; animation-timing-function: ease-in-out; animation-delay: 1.2s;"></div>
131 </div>
132 </div>
133 </div>
134</body>
135</html>