在 React 中使用 Javascript/Jquery 生成关键帧

Question

I'm working on an animation in a react project. The animation includes multiple bubble s.

Each bubble needs to grow and shrink rapidly, my css animation would look like this

@keyframes bubbleTwitch {
  0% {
    width: 200px;
    height: 200px;
  }
  50% {
    width: 150px;
    height: 150px;
  }
  100% {
    width: 200px;
    height: 200px;
  }
}

Then I would repeat it infinitely, at a very short duration

.bubble {
  animation-name:bubbleTwitch;
  animation-duration:150;
  animation-iteration-count:infinite;
}

But the problem is each bubble is a different size. I would use transform:scale() but I am already using transform for particular translate ing that is specific to each bubble.

I need a way to generate the keyframes for each bubble in javascript, so that I can tune it to each bubble's size. Or, if there is a way to maintain my original translate positions, I could simply create a css animation to accomplish this using transform:scale .

Anyone know a good way around this?

Answer 1

You can fixate the size of each bubble onto an outer div by having the bubble's size change as a percentage. Your jsx might look something like:

<div className={s.bubbleContainer}>
    <div className={bubble} />
</div>

Then the css can be styled as follows:

.bubbleContainer {
    width: 200px;
    height: 200px;
}

@keyframes bubbleTwitch {
  0% {
    width: 100%;
    height: 100%;
  }
  50% {
    width: 75%;
    height: 75%;
  }
  100% {
    width: 100%;
    height: 100%;
  }
}

This way, you can set each individual bubbleContainer to have different sizes with a class in a similar manner to how you planned on doing it with transform:scale.