← back to Only CSS: Joint Animationcompare with ground truth →
model output
LLaMA 4 Scout
Only CSS: Joint Animation
A 0.72T 0.31
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 .bar {
9 position: absolute;
10 top: 50%;
11 left: 50%;
12 transform: translate(-50%, -50%);
13 width: 100px;
14 height: 20px;
15 background-color: #2196F3;
16 border-radius: 10px;
17 }
18 .animate {
19 animation: rotate 2s linear infinite;
20 }
21 @keyframes rotate {
22 0% {
23 transform: translate(-50%, -50%) rotate(0deg);
24 }
25 100% {
26 transform: translate(-50%, -50%) rotate(360deg);
27 }
28 }
29 </style>
30</head>
31<body>
32 <div class="bar animate"></div>
33</body>
34</html>