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并修改其中的持续时间来为不同速度的元素执行此操作。确保始终包含重要内容，因为只有在按下按键时才触发类，并且无论如何都要覆盖。

Answer 2

Chrome和Firefox开发人员工具现在支持减慢各种动画的速度。

<强>铬：

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

<强>火狐：

请参阅working with animations

将CSS过渡/动画减慢为＆＃34;慢动作＆＃34;

2 个答案: