Animation issues with rocket on Congrats new project page

[Thibaud Colas]

There are a number of issues with the rocket animation shown on the Congrats page. In no specific order,

• The page take up between 10 and 30% of my CPU to render the animations on a MacBook Pro from 2015.
• Firefox has a different animation from other browsers, where the rocket exhaust__line extends further than it should.
• For other browsers (tested in Chrome and Safari on macOS), the smoke is cropped to the sides because of root-level SVGs being overflow: hidden.
• The animation doesn’t respect ​`prefers-reduced-motion: reduce` (more of an enhancement).

I’ve taken a stab at addressing these, and cleaning up unused CSS and SVG, in ​https://github.com/django/django/pull/13463.

[Thibaud Colas]

Screenshot of the Chrome DevTools showing CPU usage with the animation

[Thibaud Colas]

Screenshot of animation rendering in Firefox

[Thibaud Colas]

Screenshot of animation rendering in Safari

[Mariusz Felisiak]

Thanks for this ticket.

[Mariusz Felisiak <felisiak.mariusz@…>]

In 838e115a:

Refs #32051 -- Cleaned up CSS and SVG in the 'Congrats' page.

• Removed unnecessary vendor prefixes.
• Removed unused CSS and SVG code.
• Removed invalid CSS.
• Removed IE9-only browser reset styles.
• Fixed animation on Firefox.

[Mariusz Felisiak <felisiak.mariusz@…>]

In b807298:

Fixed #32051 -- Fixed rocket animation on the 'Congrats' page.

• Fixed congratulations smoke being cropped.
• Refactored congratulation rocket so the animation can be stopped.
• Made animation respect user preference for reduced animation.
• Made rocket animation stop after 7s.