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>Water Drop Animation</title>
7<style>
8 * { margin: 0; padding: 0; box-sizing: border-box; }
9
10 body {
11 background: #1e22aa;
12 width: 100vw;
13 height: 100vh;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 overflow: hidden;
18 font-family: 'Arial', sans-serif;
19 }
20
21 .scene {
22 position: relative;
23 width: 300px;
24 height: 300px;
25 display: flex;
26 align-items: center;
27 justify-content: center;
28 }
29
30 /* Water drop shape using SVG clip or CSS */
31 .drop {
32 position: absolute;
33 width: 180px;
34 height: 200px;
35 background: linear-gradient(135deg, #e8eaf6 0%, #f5f6fa 50%, #dde0f0 100%);
36 border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
37 clip-path: polygon(50% 0%, 100% 50%, 85% 85%, 50% 100%, 15% 85%, 0% 50%);
38 animation: dropMorph 3s ease-in-out forwards;
39 transform-origin: center bottom;
40 }
41
42 /* Using a proper water drop shape */
43 .drop-container {
44 position: absolute;
45 animation: dropFall 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
46 }
47
48 .drop-svg {
49 animation: dropMorphSvg 3s ease-in-out forwards;
50 filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
51 }
52
53 .ripple-container {
54 position: absolute;
55 bottom: -20px;
56 left: 50%;
57 transform: translateX(-50%);
58 opacity: 0;
59 animation: rippleAppear 3s ease-in-out forwards;
60 }
61
62 .ripple {
63 position: absolute;
64 border: 1.5px solid rgba(255,255,255,0.6);
65 border-radius: 50%;
66 transform: translateX(-50%) translateY(-50%);
67 left: 0;
68 top: 0;
69 }
70
71 .ripple-1 {
72 width: 120px;
73 height: 30px;
74 animation: rippleExpand1 3s ease-in-out forwards;
75 }
76
77 .ripple-2 {
78 width: 180px;
79 height: 45px;
80 animation: rippleExpand2 3s ease-in-out forwards;
81 opacity: 0;
82 }
83
84 .card {
85 position: absolute;
86 background: linear-gradient(135deg, #eef0f8 0%, #f8f9fd 60%, #e8eaf4 100%);
87 border-radius: 24px;
88 opacity: 0;
89 display: flex;
90 flex-direction: column;
91 align-items: center;
92 justify-content: center;
93 padding: 40px;
94 text-align: center;
95 animation: cardExpand 3s ease-in-out forwards;
96 animation-delay: 2.5s;
97 }
98
99 .card h1 {
100 font-size: 28px;
101 font-weight: 800;
102 color: #3a7a8c;
103 margin-bottom: 16px;
104 opacity: 0;
105 animation: textFadeIn 0.8s ease forwards;
106 animation-delay: 3.8s;
107 }
108
109 .card p {
110 font-size: 14px;
111 color: #6a9aaa;
112 max-width: 280px;
113 line-height: 1.5;
114 opacity: 0;
115 animation: textFadeIn 0.8s ease forwards;
116 animation-delay: 4s;
117 }
118
119 @keyframes dropFall {
120 0% { transform: translateY(-80px) scale(1); }
121 40% { transform: translateY(0px) scale(1); }
122 55% { transform: translateY(20px) scale(1.05, 0.9); }
123 70% { transform: translateY(0px) scale(0.95, 1.05); }
124 85% { transform: translateY(5px) scale(1.02, 0.98); }
125 100% { transform: translateY(0px) scale(1); }
126 }
127
128 @keyframes rippleAppear {
129 0% { opacity: 0; }
130 35% { opacity: 0; }
131 45% { opacity: 1; }
132 80% { opacity: 0.6; }
133 100% { opacity: 0; }
134 }
135
136 @keyframes rippleExpand1 {
137 0% { width: 0px; height: 0px; opacity: 0; }
138 35% { width: 0px; height: 0px; opacity: 0; }
139 45% { width: 80px; height: 20px; opacity: 1; }
140 70% { width: 160px; height: 40px; opacity: 0.5; }
141 100% { width: 200px; height: 50px; opacity: 0; }
142 }
143
144 @keyframes rippleExpand2 {
145 0% { opacity: 0; width: 0; height: 0; }
146 45% { opacity: 0; width: 0; height: 0; }
147 55% { opacity: 0.7; width: 120px; height: 30px; }
148 75% { opacity: 0.4; width: 220px; height: 55px; }
149 100% { opacity: 0; width: 280px; height: 70px; }
150 }
151
152 @keyframes cardExpand {
153 0% {
154 opacity: 0;
155 width: 160px;
156 height: 160px;
157 transform: rotate(-15deg) translateY(30px);
158 }
159 20% {
160 opacity: 1;
161 width: 160px;
162 height: 160px;
163 transform: rotate(-5deg) translateY(10px);
164 }
165 50% {
166 opacity: 1;
167 width: 200px;
168 height: 200px;
169 transform: rotate(0deg) translateY(0px);
170 }
171 80% {
172 opacity: 1;
173 width: 520px;
174 height: 320px;
175 transform: rotate(0deg) translateY(0px);
176 }
177 100% {
178 opacity: 1;
179 width: 540px;
180 height: 340px;
181 transform: rotate(0deg) translateY(0px);
182 }
183 }
184
185 @keyframes textFadeIn {
186 0% { opacity: 0; transform: translateY(10px); }
187 100% { opacity: 1; transform: translateY(0); }
188 }
189
190 /* Hide drop when card appears */
191 .drop-container {
192 animation: dropFall 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards,
193 dropHide 0.3s ease forwards 2.8s;
194 }
195
196 @keyframes dropHide {
197 to { opacity: 0; }
198 }
199
200 .ripple-container {
201 animation: rippleAppear 2.5s ease-in-out forwards,
202 rippleHide 0.3s ease forwards 2.8s;
203 }
204
205 @keyframes rippleHide {
206 to { opacity: 0; }
207 }
208</style>
209</head>
210<body>
211
212<div class="scene">
213 <!-- Water drop -->
214 <div class="drop-container">
215 <svg class="drop-svg" width="160" height="190" viewBox="0 0 160 190" fill="none" xmlns="http://www.w3.org/2000/svg">
216 <defs>
217 <linearGradient id="dropGrad" x1="30%" y1="10%" x2="80%" y2="90%">
218 <stop offset="0%" stop-color="#eef0f8"/>
219 <stop offset="50%" stop-color="#f5f6fa"/>
220 <stop offset="100%" stop-color="#dde0ee"/>
221 </linearGradient>
222 </defs>
223 <path d="M80 5 C80 5, 155 90, 155 130 C155 165, 120 185, 80 185 C40 185, 5 165, 5 130 C5 90, 80 5, 80 5 Z"
224 fill="url(#dropGrad)"/>
225 </svg>
226 </div>
227
228 <!-- Ripple rings -->
229 <div class="ripple-container">
230 <div class="ripple ripple-1"></div>
231 <div class="ripple ripple-2"></div>
232 </div>
233
234 <!-- Card that morphs from drop -->
235 <div class="card">
236 <h1>Protecting Our<br>Clean Water</h1>
237 <p>Addressing phosphorus, the greatest threat to clean water in Lake Champlain</p>
238 </div>
239</div>
240
241</body>
242</html>