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>Elliptical Orbit Animation</title>
7 <style>
8 /*
9 RECREATION NOTES:
10 - Background: Dark gray (#444243).
11 - Path: White elliptical outline, centered.
12 - Dot: Solid white circle orbiting clockwise.
13 - Depth: The dot passes in front of the line at the bottom and behind at the top.
14 - Timing: 4-second linear angular velocity loop.
15 */
16
17 body {
18 margin: 0;
19 padding: 0;
20 background-color: #444243;
21 display: flex;
22 justify-content: center;
23 align-items: center;
24 height: 100vh;
25 overflow: hidden;
26 }
27
28 /* The container defines the dimensions of the elliptical orbit */
29 .orbit-container {
30 position: relative;
31 width: 320px;
32 height: 80px;
33 display: flex;
34 justify-content: center;
35 align-items: center;
36 }
37
38 /* The visual path - a simple ellipse with a white border */
39 .path {
40 position: absolute;
41 width: 100%;
42 height: 100%;
43 border: 1px solid rgba(255, 255, 255, 0.8);
44 border-radius: 50%;
45 box-sizing: border-box;
46 z-index: 5; /* Middle layer: behind the front arc, in front of the back arc */
47 }
48
49 /*
50 To create a perfect elliptical movement with pure CSS:
51 We nest three divs and apply separate animations.
52 1. dot-depth-manager: Switches z-index at 50% points to simulate 3D depth.
53 2. dot-x-axis: Moves left/right using ease-in-out (sine wave).
54 3. dot-y-axis: Moves up/down using ease-in-out with a 90-degree phase shift (cosine wave).
55 */
56 .dot-depth-manager {
57 position: absolute;
58 width: 0;
59 height: 0;
60 animation: z-depth 4s step-end infinite;
61 }
62
63 .dot-x-axis {
64 position: absolute;
65 /* Cubic-bezier(0.45, 0, 0.55, 1) approximates a pure sine wave */
66 animation: move-x 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
67 }
68
69 .dot-y-axis {
70 position: absolute;
71 animation: move-y 4s cubic-bezier(0.45, 0, 0.55, 1) infinite;
72 /* Shifting the Y animation by 1s (25% of 4s) creates the elliptical path */
73 animation-delay: -1s;
74 }
75
76 .dot {
77 width: 22px;
78 height: 22px;
79 background-color: #ffffff;
80 border-radius: 50%;
81 /* Centers the dot on the invisible coordinate point */
82 transform: translate(-50%, -50%);
83 }
84
85 /* Horizontal oscillation: Right (160px) to Left (-160px) */
86 @keyframes move-x {
87 0%, 100% { transform: translateX(160px); }
88 50% { transform: translateX(-160px); }
89 }
90
91 /* Vertical oscillation: Top (-40px) to Bottom (40px) */
92 /* Combined with X-axis delay, this results in a clockwise rotation */
93 @keyframes move-y {
94 0%, 100% { transform: translateY(-40px); }
95 50% { transform: translateY(40px); }
96 }
97
98 /* Depth manager: Switches between front (index 10) and back (index 1) */
99 @keyframes z-depth {
100 0% { z-index: 10; } /* 0s to 2s: Front (bottom half of the orbit) */
101 50% { z-index: 1; } /* 2s to 4s: Back (top half of the orbit) */
102 }
103 </style>
104</head>
105<body>
106
107 <div class="orbit-container">
108 <!-- Visual path line -->
109 <div class="path"></div>
110
111 <!-- Moving dot with nested animation layers -->
112 <div class="dot-depth-manager">
113 <div class="dot-x-axis">
114 <div class="dot-y-axis">
115 <div class="dot"></div>
116 </div>
117 </div>
118 </div>
119 </div>
120
121</body>
122</html>