Slow down CSS transitions/animations into “slow mo

Question

On a Mac, if you hold the Shift key and perform an action that involves animation, it will slow down the animation. For example, hold Shift and minimise a window. This effect is described in various places (e.g. YouTube, Apple - StackExchange, The Unofficial Apple Weblog).

It would be nice to slow down CSS animations/transitions in a similar way. Is there a way to achieve this (apart from simply tweaking the animation-duration value in the CSS)?

Answer 1

Chrome and Firefox developer tools now support slowing down of many kinds of animations.

Chrome:

In the 'Styles' tab of DevTools, look for an 'Animations' icon that opens up the Animations Inspector. More info:

• Chrome DevTools Animation Inspector
• New animation controls in Chrome Canary

Firefox:

• See documentation on working with animations

Answer 2

You could combine some javascript and CSS to accomplish the effect on a consistent basis, meaning you won't have to go into your code anymore. Heres the code I tried:

function keydown(event){
    if(event.which == 16) document.body.className = "slowmotion";
}
function keyup(event){
    document.body.className = "";
}
if (window.addEventListener) {
    window.addEventListener('keydown', keydown, false); 
    window.addEventListener('keyup', keyup, false); 
} else if (window.attachEvent)  {
    window.attachEvent('keydown', keydown);
    window.attachEvent('keyup', keyup);
}

And heres the CSS:

@keyframes move {
    0% {left: 0}
    50% {left: 100%}
    100% {left: 0}
}
@-webkit-keyframes move {
    0% {left: 0}
    50% {left: 100%}
    100% {left: 0}
}
body > div {
    position: absolute;
    background: red;
    width: 50px;
    height: 50px;
    background: red;
    -webkit-animation: move 4000ms infinite;
    animation: move 4000ms infinite;
}
body.slowmotion * {
    -webkit-animation-duration: 8000ms !important;
    animation-duration: 8000ms !important;
}

And the HTML:

<div>MOVING</div>

What we're doing here is adding a class to the body to indicate we want our duration value overwritten. It will not do it immediately (in Safari it restart the animation) [EDIT: The animation does not get restarted, but gets recalculated (i.e. it reverts to where it would have been in if the other animation had been ongoing)], but it does allow for modification that way. You can even do it for elements with different speeds by doing .slowmotion #myElementID and amending the duration there. Make sure to always include the important, as the class is only triggered when the key is pressed and HAS to overwrite anyway.