Remove infinite animation for pinwheel, spin for 1.5s

[pankajkoti]

closes: #34019

---

^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named {pr_number}.significant.rst or {issue_number}.significant.rst, in newsfragments.

[potiuk]

cc: @bbovenzi @pierrejeambrun -> WDYT?

[ryanahamilton]

I added this animation back before the 2.0 release. This PR works as described.

A further accessibility enhancement that could be considered would be wrapping the the whole thing in a media query so it doesn't animate at all for folks who have prefers-reduced-motion enabled in their browsers.

@media ( prefers-reduced-motion: no-preference ) {
  .navbar-brand:hover .brand-logo-pinwheel {
    transform-origin: 17.66px 17.66px;
    animation: pinSpin 1.5s linear;
  }
}

[pankajkoti]

Thank you @ryanahamilton . This looks amazing and I think is a good win-win :)

Basically the gif is not showing my cursor, but througout the gif except from changing the reduced motion to on/off I was hovering over the spinwheel.

[ryanahamilton]

Looks good, thanks @pankajkoti!

[potiuk]

Cool. It's cool to know the "preferred-reduce-motion" exists. @mj-dd -> you might also see that for the future.

It's very interesting read actually https://www.tpgi.com/short-note-on-prefers-reduced-motion-and-puzzled-windows-users/ - where seems that this setting for windows users for example is set automatically when they disabled animations for controls in Windows. Similarly in GTK/Gnome when you disable animation

And it seems it's already implemented in most of the OS (and you can force it with about:config in chrome/firefox):

In GTK/Gnome, if gtk-enable-animations is set to false. This is configurable via GNOME Tweaks (Appearance tab or General tab, depending on version).
Alternately, add gtk-enable-animations = false to the [Settings] block of the GTK 3 configuration file (~/.config/gtk-3.0/settings.ini).
In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
In Window 7 [& 8]: Control Panel > Ease of Access > Make the computer easier to see > Turn off all unnecessary animations (when possible).
In macOS: System Preferences > Accessibility > Display > Reduce motion.
In iOS: Settings > General > Accessibility > Reduce Motion.
In Android 9+: Settings > Accessibility > Remove animations.

TIL