Currently, I am developing an animated feature within a react project. Specifically, the animation involves numerous dynamic bubbles.
For each bubble, I require a rapid growth and shrink effect. Here is a snippet of how my css animation is structured:
@keyframes bubbleTwitch {
0% {
width: 200px;
height: 200px;
}
50% {
width: 150px;
height: 150px;
}
100% {
width: 200px;
height: 200px;
}
}
This animation would run infinitely with very brief intervals:
.bubble {
animation-name:bubbleTwitch;
animation-duration:150;
animation-iteration-count:infinite;
}
The challenge arises as each bubble varies in size. While transform:scale() could be a solution, it conflicts with the existing use of transform for specific translate functions unique to each bubble.
I am searching for a method to dynamically generate keyframes for individual bubbles using javascript. This would enable me to adjust the animation based on each bubble's dimensions. Alternatively, if there exists a way to retain the original translate positions while implementing a css animation utilizing transform:scale, that would also solve the issue at hand.
If anyone has any suggestions or workarounds, I would greatly appreciate your input. Thank you!