So I have this wave animation, but when it restarts its very noticeable. Is there a way to make this animation more smooth, so it just loops, without noticing that it restarted the animation?
Here is the wave animation:
/* for the pen */
html, body {
margin: 0;
min-height: 100%;
background-color: #f2f2f2;
}
/* waves */
.ocean {
height: 80px; /* change the height of the waves here */
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow-x: hidden;
}
.wave {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23003F7C'/%3E%3C/svg%3E");
position: absolute;
width: 200%;
height: 100%;
animation: wave 10s -3s linear infinite;
transform: translate3d(0, 0, 0);
opacity: 0.8;
}
.wave:nth-of-type(2) {
bottom: 0;
animation: wave 18s linear reverse infinite;
opacity: 0.5;
}
.wave:nth-of-type(3) {
bottom: 0;
animation: wave 20s -1s linear infinite;
opacity: 0.5;
}
@keyframes wave {
0% {transform: translateX(0);}
50% {transform: translateX(-25%);}
100% {transform: translateX(-50%);}
}<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>Note: start the animation and wait a little while looking at it, and you will see the restart of the animation is not smooth. The three waves restarts at three different times, 10s, 18s and 20s.
>Solution :
Just add another @Keyframe and update time duration in CSS. I just update all changes in below code snippet and I hope it’ll help you out. Thank You
/* for the pen */
html, body {
margin: 0;
min-height: 100%;
background-color: #f2f2f2;
}
/* waves */
.ocean {
height: 80px; /* change the height of the waves here */
width: 100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow-x: hidden;
}
.wave {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 88.7'%3E%3Cpath d='M800 56.9c-155.5 0-204.9-50-405.5-49.9-200 0-250 49.9-394.5 49.9v31.8h800v-.2-31.6z' fill='%23003F7C'/%3E%3C/svg%3E");
position: absolute;
width: 200%;
height: 100%;
animation: wave 15s -3s linear infinite;
transform: translate3d(0, 0, 0);
opacity: 0.8;
}
.wave:nth-of-type(2) {
bottom: 0;
animation: wave 20s linear reverse infinite;
opacity: 0.5;
}
.wave:nth-of-type(3) {
bottom: 0;
animation: wave 25s -1s linear infinite;
opacity: 0.5;
}
@keyframes wave {
0% {transform: translateX(0);}
25% {transform: translateX(-25%);}
50% {transform: translateX(-50%);}
75% {transform: translateX(-25%);}
}<div class="ocean">
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
</div>