All geek questions in one place

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

Chrome Developer Tools has a great feature that allows you to pause the animation and control your speed, but the problem is that they are controlled by the mouse. Sometimes I need to pause the animation without moving the mouse cursor to check something inside the hover-activated animation, so I cannot use the pause button. Is there a keyboard shortcut for this pause animation button, so I don’t need to move the cursor from what I'm doing?

+6
source share
3 answers

CSS3

Right now, if it's a CSS3 animation you can't pause, but you can play and customize it using the DevTools Animation Inspector.

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

Javascript

You can create breakpoints for each frame or for each pair of frames.

+1
source

As mentioned earlier, there is no key combination to pause the animation, but I found the following best: use Ctrl + Shift + C (Cmd + Shift + C on Mac) to enable validation while the cursor is on the element with the animation freeze activated. This does not stop already running animations, but prevents the start of animations activated by the mouse when checking, which may be enough to check the element.

+3
source

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

+2
source

Source: https://habr.com/ru/post/983422/

More articles:


All Articles