There is a nifty feature in Chrome's Developer Tools which allows you to pause animations and control their speed, but the problem is they're mouse-controlled buttons. Sometimes I need to pause an animation without actually moving the mouse cursor to inspect something inside a hover-activated animation, so I can't really use the pause button. Is there a keyboard shortcut for that animation pause button so I don't need to move the cursor off whatever I'm doing?
The Chrome DevTools now offers an animation pane selectable from the 3 dots menu which allows you to record animations and then replay each frame on a timeline basis, allowing inspection of the DOM at each point.
More details available here from Chrome's docs: https://developer.chrome.com/docs/devtools/css/animations