Water Wave Animation
Realistic water wave animation using CSS transforms
Code
.water-container {
width: 300px;
height: 200px;
background: #0093e9;
border-radius: 16px;
position: relative;
overflow: hidden;
}
.wave {
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 100%;
background: rgba(255,255,255,0.2);
border-radius: 45%;
animation: wave-animation 8s linear infinite;
}
.wave:nth-child(2) {
animation-delay: -4s;
opacity: 0.5;
}
@keyframes wave-animation {
0% {
transform: translateX(-50%) rotate(0deg);
}
100% {
transform: translateX(-50%) rotate(360deg);
}
}HTML
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="water-container"</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="wave"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
<"attr-name"</span>>class</span>="tag"</span>>div</span> "attr-name"</span>>class</span>="wave"</span>></"attr-name"</span>>class</span>="tag"</span>>div</span>>
</"attr-name"</span>>class</span>="tag"</span>>div</span>>