css - 将 CSS 转换/动画减慢到 "slow motion"

Question

在 Mac 上，如果您按住 Shift 键并执行涉及动画的操作，它会减慢动画速度。例如，按住 Shift 并最小化窗口。这种效果在不同的地方都有描述(例如 YouTube 、 Apple - StackExchange 、 The Unofficial Apple Weblog )。

以类似的方式减慢 CSS 动画/过渡会很好。有没有办法实现这一点(除了简单地调整 CSS 中的动画持续时间值)？

Answer 1

您可以组合一些 javascript 和 CSS 以在一致的基础上实现效果，这意味着您不必再编写代码了。这是我试过的代码:

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);
}

这是 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;
}

和 HTML:

<div>MOVING</div>

我们在这里所做的是向正文添加一个类，以指示我们希望覆盖持续时间值。它不会立即执行(在 Safari 中它会重新启动动画)[编辑:动画不会重新启动，但会重新计算(即它会恢复到如果其他动画正在进行时它应该在的位置)] ，但它确实允许以这种方式进行修改。您甚至可以通过执行 .slowmotion #myElementID 并修改那里的持续时间来为具有不同速度的元素执行此操作。确保始终包含重要内容，因为该类仅在按下键时触发，并且无论如何都必须覆盖。