CSS3改变动画持续时间（速度）动画中期

Question

我不确定这是不是重复，所以原谅我。

问题

是否可以在不重置动画的情况下更改动画持续时间？如果没有，是否可以等到最终的关键帧完成后才能删除动画并重新添加它以较慢的速度开始动画（甚至等到任何关键帧完成）？

背景

我正在创建一个允许人们创建群组的应用。我在一个教堂工作，不同的群体适用于不同的人口统计学（例如儿童，男性，女性，所有成年人等）。群组可以是单个人群或许多人群。团体还可以指定是否由团体处理托儿所，或者父母是否必须照顾孩子。

我们发现，当创建一个针对成年人的团体但在团体会见的家中提供托儿服务时，人们会选择“儿童”，向我们表明该团体为孩子，它不是。

我只有570px x 456px可以使用（针对我的反对意见，群组提交页面加载了一个弹出式iframe），所以我必须通过布局获得创意。以前（即，在引导之前），我有一个丑陋的布局和较小的input s，以及一条丑陋的消息，解释说，在上述情况下，它们不应该选择子项，并且它在一定程度上起作用。

现在，我有一个蓝色信息按钮，它使用引导弹出框来显示消息。

这在较小程度上起作用，因为我怀疑人们没有点击按钮，因为“谁被邀请了？”似乎相当自我解释。

我的解决方案是，如果选择多个受众特征，则会使信息符号退回，如果所选复选框之一为“儿童”，则反弹两倍。

代码

我已经创建了类并添加了javascript来执行此操作。 （简化jsFiddle code）

HTML

<div style="text-align: center; margin-top: 5%">
    <div class="btn btn-info">
        <span id="glyphInfo" class="glyphicon glyphicon-info-sign" style="line-height: 22px"></span>
    </div>
</div>
<div style="text-align: center">
    animation-duration: <span id="spanDuration"></span>
</div>
<div style="text-align: center">
    classes: <span id="spanClass"></span>
</div>
<div style="text-align: center; margin-top: 15px">
    <div class="btn btn-default" id="btnToggleBounce">Toggle Bounce</div>
    <div class="btn btn-default" id="btnToggleFast">Toggle Fast</div>
</div>

使用Javascript / JQuery的

var iGlyph = $("#glyphInfo");
var btnBounce = $("#btnToggleBounce");
var btnFast = $("#btnToggleFast");
var spanDur = $("#spanDuration");
var spanClass = $("#spanClass");

function updateText() {
    spanDur.text(iGlyph.css("animation-duration"));
    spanClass.text(iGlyph.prop("class"));
}

$(function () {
    btnBounce.click(function () {
        iGlyph.toggleClass("bounce");
        updateText();
    });

    btnFast.click(function () { 
        iGlyph.toggleClass("bounce-fast");
        updateText();
    });

    updateText();
});

生成较少的CSS

.bounce {
    -webkit-animation: bounceKeyframe infinite;
    -o-animation: bounceKeyframe infinite;
    animation: bounceKeyframe infinite;
    -webkit-animation-duration: 0.7s;
    animation-duration: 0.7s;
}
.bounce.bounce-fast {
    -webkit-animation-duration: 0.35s;
    animation-duration: 0.35s;
}
@keyframes bounceKeyframe {
    0% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    35% {
        -webkit-transform: translate(0, -0.9em);
        -ms-transform: translate(0, -0.9em);
        -o-transform: translate(0, -0.9em);
        transform: translate(0, -0.9em);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    70% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
}
@-webkit-keyframes bounceKeyframe {
    0% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    35% {
        -webkit-transform: translate(0, -0.9em);
        -ms-transform: translate(0, -0.9em);
        -o-transform: translate(0, -0.9em);
        transform: translate(0, -0.9em);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    70% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
}
@-moz-keyframes bounceKeyframe {
    0% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }
    35% {
        -webkit-transform: translate(0, -0.9em);
        -ms-transform: translate(0, -0.9em);
        -o-transform: translate(0, -0.9em);
        transform: translate(0, -0.9em);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
    70% {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        transform: translate(0, 0);
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
    }
}

这适用于Firefox，但是当您切换.bounce-fast时，动画会重新启动（跳过）。毫不奇怪，Internet Explorer完全在屏幕外反弹图标（看起来它不喜欢同时使用em和px单位），但是animation-duration - 明智地，它与Chrome的行为相同，它使用设置animation-duration规则时设置的animation，并且在animation规则未设置之前不会覆盖它。

问题

因此，理想情况下，我可以设置animation-duration，而无需完全重置动画。我想要从一个速度平稳过渡到另一个速度，没有图标跳跃。

这可能吗？

Answer 1

不幸的是，纯CSS动画无法做到这一点。 CSS动画的本质是转换的计算只需要发生一次（当调用动画时），以加快它们的速度。

如果你想改变动画的速度，你需要使用Javascript（这几乎和CSS动画一样快，有时快）

我特别喜欢Greensock和Velocity