Is there a keyboard shortcut for the "pause animation" feature in Chrome Developer Tools? (F12)

Question

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?

Whiffet

Why the downvote? This is definitely a developer oriented question. Only developers use the "Chrome DEVELOPER Tools". Developers will know the answer to this question more likely than anyone else! Where else should I post this question, then? – Whiffet

Where is the pause animation feature? – Flimflam

Inside the Developer Tools, under the tabs "Styles", "Computed", "Event Listeners", etc, you can see at the right a play button inside a circle. If you click it, a slider bar will appear with which you can set the animation speed, and at the left of that slider bar, there's a pause button. That's the button I want to use, but without actually using the mouse, because I want to pause a hover activated animation, and if I move the mouse cursor off the page, the animation I want to pause is not visible anymore. That's why I need a keyboard shortcut for that. – Whiffet

Answer 1

Updated answer

You can trigger animation with "Toggle Element State" option, or from JavaScript in console, without using mouse. Also, once you're in debugger; mode, inspecting should not trigger events.

---

Old answer:

(general info about debugging animations)

CSS3

https://developers.google.com/web/tools/chrome-devtools/inspect-styles/animations

JavaScript

You can create breakpoints every frame, or every couple of frames.

Decidua

Downvoted because a) CSS3 animations can be paused with the Animation inspector, b) Pausing the JavaScript debugger has no effect on CSS animations, and c) Neither of these points answer the question which was about triggering the pause animation feature without using the mouse. – Grimmett

Answer 2

As previously mentioned, there's no keyboard shortcut to pause an animation, but I've found the next best thing: Using Ctrl+Shift+C (Cmd+Shift+C in Mac) to enable inspecting while the cursor is on the element with the hover activated animation. That doesn't stop already running animations, but prevents further mouse activated animations from triggering while inspecting, which might be enough to inspect an element.

Whiffet

Answer 3

No! Chrome DevTools has no such a shortcut. You can see the complete list of chrome DevTools Shortcuts at: https://developer.chrome.com/docs/devtools/shortcuts/

Ephesians

Answer 4

This probably isn't the answer for many people, but I press F12 to bring up the developer console, click the little arrow-ish icon on the very top / left, click the offensive control and hit delete, removing the element entirely. As I said: not everybody's solution, but it's fast & lets me get to the "I can think again" part of the exercise.

Chrissy

Answer 5

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

Mockheroic