CODEWITHSUNDEEP
css
Adoga Patricia
Adoga Patricia

Reputation: 129

Flickering animation issue in css

I made an animation to look like fire flies but it keeps flickering when starting a new loop

I used -webkit-transform-style: preserve-3d; and -webkit-backface-visibility: hidden; but they don't work

https://codepen.io/Triciah101/pen/YmKLzb this is an example of the code on code pen.

I want the animation to be smooth without the weird flickering it does.

Upvotes: 0

Views: 59

Answers (1)

Henfs
Henfs

Reputation: 5411

Because you start at translate position of 0% and finished in another distance at 100%. Try to match 0% and 100%, so there will be a "combination" in the animation.

Also, you are going from 0% to 2% and changing a lot of distance. This is too fast, and it's causing the unwanted effect.

Upvotes: 1

Related Questions