减慢CSS转换/动画速度，使其变为“动画”；慢动作“；

在Mac电脑上，如果按住Shift键并执行涉及动画的操作，将减慢动画速度。例如，按住Shift键并最小化窗口。在不同的地方（例如，）描述了这种效果

---

以类似的方式减慢CSS动画/转换速度会很好。有没有办法实现这一点（除了简单地调整CSS中的动画持续时间值）？

您可以将一些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并修改其中的持续时间，对具有不同速度的元素执行此操作。确保始终包含重要的内容，因为该类仅在按键时触发，并且无论如何都必须覆盖。

Chrome和Firefox开发工具现在支持减缓多种动画的速度

铬合金：

在DevTools的“样式”选项卡中，查找打开动画检查器的“动画”图标。更多信息：

Firefox：

• 请参阅有关的文档

---

如果有机会，我会尝试一下，谢谢。我希望谷歌Chrome或类似的扩展。我想说，这应该不难做到，TBH，但Chrome有一个漏洞，你不能用JS改变动画的持续时间（如果你尝试，什么都不会发生），所以这将是。。。现在没有意义了。但是我想，添加这个脚本并用动画调整所有元素应该不会太难。好吧，希望这有帮助：）