CODEWITHSUNDEEP
csscss-selectorscss-transitionscss-animations
POP
POP

Reputation: 671

How to do this CSS animation? (timing-function)

I want an animation like this:

like this

(The lower blue line is an image of movement. lol)

I tried to make with cubic-bezier but it didn't work..

I don't know much about css animation, but cubic-bezier can add points other than the first and last?
In my opinion, I feel like I should increase points..

Q. What kind of curve should I use for css animation like this?

Upvotes: 0

Views: 112

Answers (1)

Persijn
Persijn

Reputation: 14990

That's not possible with CSS animation -Gui Magnani

If you manualy set the animations times and keyframes you can get close to your drawing.

.container {
  position: relative;
  height: 90vh;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  box-shadow: 0px 0px 0px 5px green;
  animation: pulse 2s linear infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0px 0px 0px 10px green;
    width: 1px;
    height: 1px;
  }
  20% {
    box-shadow: 0px 0px 0px 100px green;
    width: 1px;
    height: 1px;
  }
  30% {
    box-shadow: 0px 0px 0px 90px green;
    width: 1px;
    height: 1px;
  }
  90% {
    box-shadow: 0px 0px 0px 10px green;
    width: 300px;
    height: 300px;
  }
  95% {
    box-shadow: 0px 0px 0px 0px green;
    width: 300px;
    height: 300px;
  }
  100% {
    box-shadow: 0px 0px 0px 0px green;
    width: 290px;
    height: 290px;
  }
}
<div class="container">
  <div class="circle"></div>
</div>

Upvotes: 2

Related Questions