← back to Wave Animation Pure CSScompare with ground truth →
model output
GPT-5.4
Wave Animation Pure CSS
A 0.98T 0.19
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>Training Text Sweep</title>
7<style>
8 :root{
9 --bg:#ffffff;
10 --red:#ff0000;
11 --fade:#ff8a8a;
12 --duration:1.8s;
13 }
14
15 html,body{
16 margin:0;
17 width:100%;
18 height:100%;
19 background:var(--bg);
20 overflow:hidden;
21 font-family: Arial, Helvetica, sans-serif;
22 }
23
24 body{
25 display:grid;
26 place-items:center;
27 }
28
29 .word{
30 position:relative;
31 font-size:54px;
32 font-weight:700;
33 letter-spacing:4px;
34 line-height:1;
35 color:var(--red);
36 text-transform:uppercase;
37 user-select:none;
38 -webkit-font-smoothing:antialiased;
39 animation: pulse var(--duration) linear infinite;
40 }
41
42 .word::after{
43 content:attr(data-text);
44 position:absolute;
45 inset:0;
46 color:transparent;
47 background:
48 linear-gradient(
49 90deg,
50 rgba(255,138,138,0) 0%,
51 rgba(255,138,138,0) 8%,
52 rgba(255,138,138,0.95) 18%,
53 rgba(255,138,138,1) 28%,
54 rgba(255,138,138,1) 40%,
55 rgba(255,138,138,0.95) 52%,
56 rgba(255,138,138,0) 64%,
57 rgba(255,138,138,0) 100%
58 );
59 background-size:42% 100%;
60 background-repeat:no-repeat;
61 background-position:-55% 0;
62 -webkit-background-clip:text;
63 background-clip:text;
64 animation:sweep var(--duration) linear infinite;
65 pointer-events:none;
66 }
67
68 @keyframes sweep{
69 0% { background-position:-55% 0; }
70 100% { background-position:155% 0; }
71 }
72
73 @keyframes pulse{
74 0%,100%{ transform:translateY(0); }
75 50%{ transform:translateY(0); }
76 }
77
78 /* Scale down on smaller screens while keeping the same centered look */
79 @media (max-width: 700px){
80 .word{ font-size:42px; letter-spacing:3px; }
81 }
82</style>
83</head>
84<body>
85 <div class="word" data-text="TRAINING">TRAINING</div>
86</body>
87</html>