0

I'm trying to reproduce this animation via css https://www.instagram.com/p/CJrYX60AYqS/.

You can find my code here https://codepen.io/giulianomlodi/pen/YzGMVNE.

.container { position: relative; text-align: center; justify-content: center; align-content: center; animation-name: container1; transition: all linear; animation-duration: 2s; animation-iteration-count: infinite; animation-fill-mode: forward; animation-timing-function: linear; transform-style: preserve-3d; transition-delay: 1s; } @keyframes container1 { 0% {} 100% { filter: alpha(opacity=0); opacity: 0; } } .circle1 { position: absolute; height: 205px; width: 205px; border-radius: 50%; background: #E1E3D1; box-shadow: -29px 29px 58px #bfc1b2, 29px -29px 58px #fffff0; animation-name: circle1an1; transition: all linear; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; transform-style: preserve-3d; transition-delay: 1s; } @keyframes circle1an1 { 0% { filter: alpha(opacity=0); opacity: 0; transform: scale(1.0); } 100% { transform: scale(2.0); } } .circle2 { position: absolute; height: 410px; width: 410px; border-radius: 50%; background: #E1E3D1; box-shadow: -29px 29px 58px #bfc1b2, 29px -29px 58px #fffff0; animation-name: circle2an1; transition: all linear; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; transition-delay: 2s; } @keyframes circle2an1 { 0% { transform: scale(1.0); } 100% { transform: scale(2.0); } } .circle3 { position: absolute; height: 615px; width: 615px; border-radius: 50%; background: #E1E3D1; box-shadow: -29px 29px 58px #bfc1b2, 29px -29px 58px #fffff0; animation-name: circle3an1; transition: all linear; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; transform-style: preserve-3d; transition-delay: 3s; } @keyframes circle3an1 { 0% { transform: scale(1.0); } 100% { filter: alpha(opacity=0); opacity: 0; transform: scale(2.0); } }
<div id="container1"> <div class="circle3"></div> <div class="circle2"></div> <div class="circle1"></div> </div>

What am I missing? I tried to add some delay but it seems that it's not taking it. I can't understand how to reproduce the wave effect because eveytime it seems that the animation it starting again not in a smoothly way.

Improve this question
1
  • I reviewed your code and it works perfectly Commented Jan 21, 2021 at 14:01

2 Answers 2

Reset to default
1

You have to adjust the seconds for delay for each of the wave. In your CSS you have the following two attributes for each wave:

 animation-duration: 2s; transition-delay: 2s;

You have to increase these values for all waves, so the wave goes until the end and becomes transparent. So they will start smoothly and end smoothly, like you wish.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for your answer unfortunately it do not work completely fine since the animation restart in a non smooth way. As you can see when the loop start again it isn't smooth as it should be.
0

I've tried with this code instead and it looks better. But there is still a problem with the delay that glitches a bit. Anyone who can give me a hint on how to solve this issue?

 .box { position: relative; } .circle { position: absolute; top: 50%; left: 50%; } @keyframes wave1 { 0% { opacity: 1; transform: scale(0) translate(-50%, -50%); } 70%, 100% { opacity: 0; transform: scale(2) translate(-50%, -50%); } } @keyframes wave2 { 0%,4%,100% { opacity: 0; transform: scale(2) translate(-50%, -50%); } 5% { opacity: 1; transform: scale(0) translate(-50%, -50%); } } @keyframes wave3 { 0%,18%,100% { opacity: 0; transform: scale(2) translate(-50%, -50%); } 20% { opacity: 1; transform: scale(0) translate(-50%, -50%); } } .c1 { height: 350px; width: 350px; border-radius: 50%; background: #E1E3D1; box-shadow: -29px 29px 58px #bfc1b2, 29px -29px 58px #fffff0; animation: wave1 10s infinite ease-in; transform-origin: top left; } .c2 { height: 300px; width: 300px; border-radius: 50%; background: #E1E3D1; box-shadow: -29px 29px 58px #bfc1b2, 29px -29px 58px #fffff0; animation: wave2 10s infinite ease-in; transform-origin: top left; } .c3 { height: 200px; width: 200px; border-radius: 50%; background: #E1E3D1; box-shadow: -29px 29px 58px #bfc1b2, 29px -29px 58px #fffff0; animation: wave3 10s infinite ease-in; transform-origin: top left; }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.