Going Full Circle on CSS Toggle Transitions

I recently worked on some “accordion” component with a custom marker to indicate open and closed states. I had it set up so the marker, a chevron, would rotate by 180 degrees when the component was in its open state. Add a CSS transition (when motion preferences allow it), job done. But… it would animate backwards upon closing, “rewind” so to speak, which is exactly how CSS should work, but I wanted it to “complete” the rotation, so: idle: start at 0 degrees expanded: go to 180 degrees closed again: go to 360 degrees idle: start at 0 degrees … and so on. Let’s take a look at what I tried, and which solution I landed on. No Gecko, amigoThis works in two browser engines, Chromium and WebKit, and my assumption is that they both are working as the specification has been, well… specified. Firefox, however, skips the closing transition. If you have any idea why, please let me know! First, here is the base markup and styles for all the demos: HTML<details> <summary> <span>Learn more about…