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

Question

我不确定这是否是重复的，请见谅。

问题

是否可以在不重置动画的情况下更改动画持续时间？如果不是，是否可以等到最后一个关键帧完成后再移除动画并重新添加以较慢的速度启动动画（甚至等到任何关键帧完成）？

背景

我正在制作一个允许人们创建群组的应用。我在教堂工作，不同的群体针对不同的人群（例如儿童、男性、女性、所有成年人等）。组可能是针对一个或多个人口统计的。小组还可以指定儿童保育是由小组负责，还是由家长负责。

我们发现，当创建一个面向成人的小组但在小组见面的房子里提供托儿服务时，人们选择“儿童”，这向我们表明该小组是为儿童，它不是。

我只有 570 像素 x 456 像素可以使用（反对我的反对，组提交页面加载到弹出 iframe 中），所以我必须在布局方面发挥创意。以前（即在引导之前），我的布局很丑陋，inputs 更小，还有一条丑陋的消息解释说，在上述情况下，他们不应该选择孩子，并且在一定程度上起作用。

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

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

我的解决方案是，如果他们选择了一个以上的人口统计，则让信息标志弹跳，如果选中的复选框之一是“儿童”，则弹跳速度是原来的两倍。

代码

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

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

/* LESS-generated 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;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

这在 Firefox 中有效，但当您切换 .bounce-fast 时，动画会重新启动（跳过）。毫不奇怪，Internet Explorer 将图标完全弹出屏幕（看起来它不喜欢同时使用 em 和 px 单位），但 animation-duration-wise，它的行为与 Chrome 相同，它使用任何 @987654332 @ 在设置 animation 规则时设置，并且在取消设置 animation 规则之前永远不会覆盖它。

问题

因此，理想情况下，我能够以某种方式设置animation-duration，而无需完全重置动画。我希望从一种速度平稳过渡到另一种速度，而不会出现图标跳跃。

这可能吗？

Answer 1

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

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

我特别喜欢Greensock和Velocity