How to make my strip inside an oval have waves in css? - html

Question

I have an oval, and inside the oval, I have a strip that I need it to have waves
I have made this:
.strip {
content: "";
position: relative;
background: #4286f4;
z-index: 1;
width: 100%;
height: 100%;
bottom: 0%;
animation: wipe 8s cubic-bezier(0.9, 0.7, 0.8, 0.8) forwards;
animation-iteration-count: infinite;
}
#keyframes wipe {
from {
bottom: 0%;
}
to {
bottom: 100%;
}
}
.oval {
position: absolute;
background: #343434;
-moz-border-radius: 0 50% / 0 100%;
-webkit-border-radius: 0 50% / 0 100%;
border-radius: 150px;
height: 100px;
width: 80%;
overflow: hidden;
}
<div class="oval">
<div class="strip"></div>
</div>
How can i make that my strip have infinite wave animation?

Answer 1

You can try some repeated radial-gradient over a linear-graident to create the waves. Then you can simply animate the background-position and you can get rid of one DOM element.
#keyframes wipe {
from {
background-position:0 85px,0 120px;
}
to {
background-position:100px -45px,100px -20px;
}
}
.oval {
border-radius: 150px;
height: 100px;
width: 80%;
overflow: hidden;
background:
radial-gradient(circle at center,#4286f4 67%,transparent 67.5%)0 5px /50px 50px repeat-x,
linear-gradient(#343434,#343434)0 30px/100% 150% repeat-x;
background-color: #4286f4;
animation: wipe 8s cubic-bezier(0.9, 0.7, 0.8, 0.8) forwards;
animation-iteration-count: infinite;
}
<div class="oval">
</div>

Answer 2

If I understand correctly you want the wave to go up and down?
You can specify percentages instead of from and to as keyframes-selector
.strip {
content: "";
position: relative;
background: #4286f4;
z-index: 1;
width: 100%;
height: 100%;
bottom: 0%;
animation: wipe 8s cubic-bezier(0.9, 0.7, 0.8, 0.8) forwards;
animation-iteration-count: infinite;
}
#keyframes wipe {
0% {
bottom: 0%;
}
50% {
bottom: 100%;
}
100% {
bottom: 0%;
}
}
.oval {
position: absolute;
background: #343434;
-moz-border-radius: 0 50% / 0 100%;
-webkit-border-radius: 0 50% / 0 100%;
border-radius: 150px;
height: 100px;
width: 80%;
overflow: hidden;
}
<div class="oval">
<div class="strip"></div>
</div>