report: update keyframes for confetti animation

[tannerdolby]

Summary

Fixes #12563

Updates the bang and gravity keyframes that are used for the perfect score confetti animation.

When the lh-pyro-before and lh-pyro-after elements (the confetti) move from one position to the next, we can still see the box-shadow's which makes up the confetti spread sort of abruptly move/flicker to a new position. This is due to the elements still having a visible opacity when moving from point1 (spot near where last confetti went off) -> point2 (new confetti position).

Current Confetti Behavior

abrupt/buggy at some points where we can see the confetti spread flicker from one spot to its destination due to opacity/visibility when moving to a new position, it doesn't happen always but is noticeable over time.

confetti-animation-abrupt-movement.mov

Confetti After Change

confetti-animation-tweaked.mov

Related Issues/PRs

#13635

[connorjclark]

Oh this is great, thanks for working on this!

Can you make the changes to report/assets/styles.css instead? If you then run yarn build-report, it will update the component.js file (which is a hacky generated file not meant to be edited directly).

[tannerdolby]

Glad to hear that, you're welcome!

Sure thing, I made the changes in report/assets/templates.html as that's where the confetti animation styling lived and used yarn build-report to generate the output file. When editing the report/renderer/components.js file directly, it felt like I might have been missing something. Thanks for the heads up.

[paulirish]

omg. thank you for figuring this out! it's been bugging all of us for a long time.

this is huge. :)

also lol @ patch-12563. that's a branch with style. 💅 cheers.

[tannerdolby]

@paulirish you're welcome! it was bugging me for awhile too, i'm really happy that we were able to find a fix :)

thanks lol 💅 I think that branch naming has become habit. cheers!