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

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?

Do you mean that the blue strip will slide into view from the bottom and out of view at the top, in an infinite loop? — showdev, May 15 '18 at 22:40
Several different ideas! I guess we're not clear on what you're aiming for ¯\\_(ツ)_/¯ — showdev, May 15 '18 at 22:49
@TemaniAfif I like it! Actual wave shapes. I didn't consider that. — showdev, May 15 '18 at 22:50
Haha, ok i don´t know why the the blue strip runs like that, in my solution, the strip runs from bottom to top. Ok, the animation that i look is the waves effect in my strip — Isaías Orozco Toledo, May 15 '18 at 22:52
Ah, ok. There are many different ways that can look; you might want to narrow it down. Here's [one example](https://codepen.io/tedmcdo/pen/PqxKXg). Here's [another](https://codepen.io/loktar00/pen/kfrKC). You might find this useful: [Animated text with CSS wave](https://stackoverflow.com/questions/41426043/animated-text-with-css-wave) — showdev, May 15 '18 at 23:00
Possible duplicate of [Filling water animation](https://stackoverflow.com/questions/29738787/filling-water-animation). — showdev, May 15 '18 at 23:16

Temani Afif · Answer 1 · 2018-05-15T22:52:36.883

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>

edited May 15 '18 at 22:52

answered May 15 '18 at 22:46

Temani Afif

245,468
26
309
415

I like it, but, how to animate the waves? is that what i looking for – Isaías Orozco Toledo May 15 '18 at 22:55
@IsaíasOrozcoToledo they are animated no ? :) as you can see, by changing background-positiion – Temani Afif May 15 '18 at 22:58
yes bro, but animation like water waves. But i looking how to do that with your snippet :) – Isaías Orozco Toledo May 15 '18 at 23:10
1

@IsaíasOrozcoToledo if you have an example so I can see, as there is many different way to have water waves. – Temani Afif May 15 '18 at 23:12
Ok, this is an in stackoverflow: https://stackoverflow.com/questions/29738787/filling-water-animation And here is the example: – Isaías Orozco Toledo May 15 '18 at 23:14
@IsaíasOrozcoToledo so you have something working, what is the issue then? – Temani Afif May 15 '18 at 23:24
The issue is how to apply that in my style, because i usually apply the value of the bottom but here the fillAnimation uses 0% { transform: translate(0, 150px); } – Isaías Orozco Toledo May 16 '18 at 00:12

score 0 · Answer 2 · answered May 15 '18 at 22:41

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>

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

2 Answers2