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>Red Dot Animation</title>
7 <style>
8 body {
9 background-color: #f5f5f5; /* Cream color */
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .dot {
17 position: relative;
18 width: 20px;
19 height: 20px;
20 border-radius: 50%;
21 background-color: #8b0a1a; /* Maroon color */
22 transform: scale(1);
23 transition: transform 0.5s ease-in-out;
24 }
25 .dot-container {
26 position: relative;
27 }
28 .dot-2 {
29 position: absolute;
30 top: 0;
31 left: 25px;
32 opacity: 0;
33 transition: opacity 0.5s ease-in-out;
34 }
35 @keyframes fade-in {
36 0% {
37 opacity: 0;
38 transform: scale(0.5);
39 }
40 100% {
41 opacity: 1;
42 transform: scale(1);
43 }
44 }
45 @keyframes fade-out {
46 0% {
47 opacity: 1;
48 transform: scale(1);
49 }
50 100% {
51 opacity: 0;
52 transform: scale(0.5);
53 }
54 }
55 @keyframes move-dot {
56 0% {
57 transform: translateX(0);
58 }
59 100% {
60 transform: translateX(25px);
61 }
62 }
63 </style>
64</head>
65<body>
66 <div class="dot-container">
67 <div class="dot"></div>
68 <div class="dot dot-2"></div>
69 </div>
70
71 <script>
72 const dot = document.querySelector('.dot');
73 const dot2 = document.querySelector('.dot-2');
74
75 // Animation sequence
76 const animationSequence = [
77 { type: 'single-dot' },
78 { type: 'double-dot' },
79 { type: 'single-dot' },
80 { type: 'double-dot' },
81 { type: 'single-dot' },
82 { type: 'double-dot' },
83 { type: 'single-dot' },
84 ];
85
86 let currentFrame = 0;
87
88 function animate() {
89 const currentAnimation = animationSequence[currentFrame];
90
91 if (currentAnimation.type === 'single-dot') {
92 dot.style.opacity = 1;
93 dot2.style.opacity = 0;
94 } else if (currentAnimation.type === 'double-dot') {
95 dot.style.opacity = 1;
96 dot2.style.opacity = 1;
97 }
98
99 currentFrame = (currentFrame + 1) % animationSequence.length;
100
101 setTimeout(animate, 1000); // 1 second per frame
102 }
103
104 animate();
105 </script>
106</body>
107</html>