animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Wave Animation Pure CSS

model output

GPT-5.4

Wave Animation Pure CSS

A 0.98T 0.19
compare with ground truth →
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>