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

model output

GPT-5.4

Pure CSS animated check mark

A 0.79T 0.27
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>Check Animation Replica</title>
7<style>
8  :root{
9    --bg:#add8d8;
10    --ring:rgba(70,70,70,.7);
11    --bar:rgba(232,210,214,.72);
12    --check:#fff;
13    --size:205px;
14    --stroke:42px;
15    --bar-h:20px;
16    --dur:2.8s;
17  }
18
19  html,body{
20    margin:0;
21    width:100%;
22    height:100%;
23    overflow:hidden;
24    background:var(--bg);
25    font-family:sans-serif;
26  }
27
28  .stage{
29    position:relative;
30    width:100vw;
31    height:100vh;
32    background:var(--bg);
33  }
34
35  .icon{
36    position:absolute;
37    left:50%;
38    top:158px;
39    width:var(--size);
40    height:var(--size);
41    transform:translateX(-50%);
42    border:1.5px solid var(--ring);
43    border-radius:50%;
44    box-sizing:border-box;
45    overflow:hidden;
46  }
47
48  .bar{
49    position:absolute;
50    left:50%;
51    top:50%;
52    width:290px;
53    height:var(--bar-h);
54    margin-left:-145px;
55    margin-top:calc(var(--bar-h) / -2);
56    background:var(--bar);
57    border-radius:2px;
58    transform-origin:50% 50%;
59    animation: sweep var(--dur) linear infinite;
60  }
61
62  .check{
63    position:absolute;
64    inset:0;
65  }
66
67  .check::before,
68  .check::after{
69    content:"";
70    position:absolute;
71    background:var(--check);
72    border-radius:999px;
73    box-shadow:0 0 8px rgba(255,255,255,.35);
74  }
75
76  /* left/down stroke */
77  .check::before{
78    width:84px;
79    height:var(--stroke);
80    left:28px;
81    top:103px;
82    transform:rotate(47deg);
83  }
84
85  /* right/up stroke */
86  .check::after{
87    width:138px;
88    height:var(--stroke);
89    left:73px;
90    top:79px;
91    transform:rotate(-43deg);
92  }
93
94  @keyframes sweep{
95    0%   { transform:rotate(-25deg); }
96    16%  { transform:rotate(-25deg); }
97    33%  { transform:rotate(45deg); }
98    50%  { transform:rotate(78deg); }
99    66%  { transform:rotate(90deg); }
100    100% { transform:rotate(90deg); }
101  }
102</style>
103</head>
104<body>
105  <div class="stage">
106    <div class="icon">
107      <div class="bar"></div>
108      <div class="check"></div>
109    </div>
110  </div>
111</body>
112</html>