← back to CSS3 loading animationscompare with ground truth →
model output
Qwen3-VL-8B-Instruct
CSS3 loading animations
A 0.70T 0.12
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>Animation</title>
7 <style>
8 body {
9 margin: 0;
10 padding: 0;
11 background-color: black;
12 overflow: hidden;
13 display: flex;
14 justify-content: center;
15 align-items: center;
16 height: 100vh;
17 }
18 .dot {
19 width: 4px;
20 height: 4px;
21 background-color: red;
22 border-radius: 50%;
23 position: absolute;
24 top: 0;
25 left: 50%;
26 transform: translateX(-50%);
27 animation: pulse 2s infinite;
28 }
29 @keyframes pulse {
30 0% {
31 transform: translateX(-50%) scale(0.5);
32 opacity: 0.5;
33 }
34 50% {
35 transform: translateX(-50%) scale(1.2);
36 opacity: 1;
37 }
38 100% {
39 transform: translateX(-50%) scale(0.5);
40 opacity: 0.5;
41 }
42 }
43 </style>
44</head>
45<body>
46 <div class="dot"></div>
47 <script>
48 const dot = document.querySelector('.dot');
49 dot.style.animationDuration = '2s';
50 dot.style.animationTimingFunction = 'ease-in-out';
51 dot.style.animationIterationCount = 'infinite';
52 </script>
53</body>
54</html>