I am currently working on creating a wave animation using three layers. However, the animation does not appear smooth and the waves do not appear endless as intended. Additionally, I am having trouble achieving the wave structure depicted in the image.
My goal is to have the waves flow without any interruptions. Currently, it is obvious when the animation comes to an end, which is not the desired effect. [![
.w1 {
stroke: none;
fill: #b3696c;
opacity: 55%;
animation: move1 4.5s linear infinite;
}
.w2 {
stroke: none;
fill: #b3696c;
opacity: 35%;
transform: translate3d(0, 0, 0);
animation: move2 4.5s linear infinite;
}
.w3 {
stroke: none;
fill: #cf2127;
opacity: 30%;
transform: translate3d(0, 0, 0);
animation: move3 2s linear infinite;
}
@keyframes move1 {
0% {
transform: translateX(-500px) scaleX(2.5);
}
50% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(0) scaleX(2.5);
}
}
@keyframes move2 {
0% {
transform: translateX(-600px) scaleX(3);
}
50% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(0) scaleX(3);
}
}
@keyframes move3 {
0% {
transform: translateX(-800px) scaleX(4);
}
50% {
transform: translateX(-100) scaleX(2.5);
}
100% {
transform: translateX(0) scaleX(4);
}
}<div class="waveAnimation">
<svg viewBox="0 0 500 150" preserveAspectRatio="none">
<path
class="w1 waveTop"
d="M-8.74,71.55 C289.78,255.11 349.60,4.47 505.36,34.05 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w2 waveMiddle"
d="M-23.42,125.83 C187.63,45.89 299.38,57.73 526.80,123.86 L500.00,150.00 L0.00,150.00 Z"
/>
<path
class="w3 waveBottom"
d="M-23.42,125.83 C172.96,-152.44 217.55,183.06 504.22,55.77 L500.00,150.00 L0.00,150.00 Z"
/>
</svg>
</div>