← back to Only CSS: Joint Animationcompare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Joint Animation
A 0.78T 0.25
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>Mechanical Linkage Animation</title>
7 <style>
8 :root {
9 --grey-bar: #a6a6a6;
10 --blue-bar: #60a6d0;
11 --blue-joint: #4d86a8;
12 --yellow-dot: #ffdb4d;
13 --dot-border: #e6c13d;
14 --dashed-line: rgba(0, 0, 0, 0.2);
15 --bg-color: #ffffff;
16 --anim-duration: 2s;
17 }
18
19 body {
20 margin: 0;
21 padding: 0;
22 display: flex;
23 justify-content: center;
24 align-items: center;
25 height: 100vh;
26 background-color: var(--bg-color);
27 overflow: hidden;
28 }
29
30 .scene {
31 position: relative;
32 width: 600px;
33 height: 600px;
34 }
35
36 /* Dashed Outlines (Ghosts) */
37 .ghost {
38 position: absolute;
39 border: 1px dashed var(--dashed-line);
40 pointer-events: none;
41 box-sizing: border-box;
42 }
43
44 /* Crank (Grey Bar) */
45 .crank {
46 position: absolute;
47 width: 160px;
48 height: 44px;
49 background-color: var(--grey-bar);
50 left: 200px;
51 top: 250px;
52 transform-origin: 22px center;
53 z-index: 2;
54 }
55
56 /* Slider/Rod (Blue Bar) */
57 .rod {
58 position: absolute;
59 width: 200px;
60 height: 52px;
61 background-color: var(--blue-bar);
62 left: 310px;
63 top: 350px;
64 transform-origin: center center;
65 display: flex;
66 align-items: center;
67 z-index: 1;
68 }
69
70 /* Dark blue joint area on the rod */
71 .rod::before {
72 content: '';
73 position: absolute;
74 left: 0;
75 width: 52px;
76 height: 52px;
77 background-color: var(--blue-joint);
78 }
79
80 .dot {
81 position: absolute;
82 width: 12px;
83 height: 12px;
84 background-color: var(--yellow-dot);
85 border: 2px solid var(--dot-border);
86 border-radius: 50%;
87 z-index: 10;
88 }
89
90 .crank .dot {
91 left: 14px;
92 top: 50%;
93 transform: translateY(-50%);
94 }
95
96 .rod .dot {
97 left: 50%;
98 top: 50%;
99 transform: translate(-50%, -50%);
100 }
101
102 /* Static Outlines for Visual Reference */
103 .ghost-crank-h { width: 160px; height: 44px; left: 200px; top: 250px; transform: rotate(-8deg); transform-origin: 22px center; }
104 .ghost-crank-v { width: 160px; height: 44px; left: 200px; top: 250px; transform: rotate(90deg); transform-origin: 22px center; }
105 .ghost-rod-h { width: 200px; height: 52px; left: 310px; top: 350px; transform: rotate(0deg); }
106 .ghost-rod-t { width: 200px; height: 52px; left: 335px; top: 300px; transform: rotate(-35deg); }
107
108 /* Animation Keyframes */
109 @keyframes crank-animation {
110 0%, 100% { transform: rotate(-8deg); }
111 45%, 55% { transform: rotate(90deg); }
112 }
113
114 @keyframes rod-animation {
115 0%, 100% { transform: translate(25px, -50px) rotate(-35deg); }
116 45%, 55% { transform: translate(0, 0) rotate(0deg); }
117 }
118
119 .crank {
120 animation: crank-animation var(--anim-duration) ease-in-out infinite;
121 }
122
123 .rod {
124 animation: rod-animation var(--anim-duration) ease-in-out infinite;
125 }
126
127 </style>
128</head>
129<body>
130
131 <div class="scene">
132 <!-- Dashed ghost lines showing start and end states -->
133 <div class="ghost ghost-crank-h"></div>
134 <div class="ghost ghost-crank-v"></div>
135 <div class="ghost ghost-rod-h"></div>
136 <div class="ghost ghost-rod-t"></div>
137
138 <!-- The moving linkage parts -->
139 <div class="crank">
140 <div class="dot"></div>
141 </div>
142
143 <div class="rod">
144 <div class="dot"></div>
145 </div>
146 </div>
147
148 <script>
149 // No JavaScript required for this CSS-only animation recreation.
150 // The movement is synchronized using the same duration and easing on two separate elements.
151 </script>
152</body>
153</html>