javascript - CSS3更改动画持续时间(速度)的中期动画

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

题

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

背景

我正在制作一个允许人们创建群组的应用。我在教堂工作，不同的群体分别针对不同的人口统计特点（例如，儿童，男人，女人，所有成年人等）。群组可以针对一个或多个人口。小组还可以指定由小组来处理托儿服务，还是由父母来照顾。



我们发现，当创建一个供成年人使用的团体，但该团体在其会见的房子提供托儿服务时，人们选择“儿童”，这向我们表明该团体是为儿童而设计的，不是。

我只有570px x 456px可以使用（针对我的异议，网上论坛iframe中加载了组提交页面），所以我不得不在版式上变得很有创意。以前（即，在进行引导之前），我有一个带有较小input的丑陋布局，以及一条丑陋的消息，说明在上述情况下，他们不应该选择子项，并且在一定程度上可行。

现在，我有一个蓝色的信息按钮，该按钮使用引导程序弹出窗口显示消息。



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

我的解决方案是，如果信息标志选择了多个受众特征，则使信息标志弹跳；如果选中的复选框之一为“子项”，则使弹跳速度快两倍。

码

我已经创建了类，并添加了（简化的）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>

尽管在您切换.bounce-fast时，动画会重新启动（跳过），但此操作在Firefox中有效。毫不奇怪，Internet Explorer会在屏幕外完全弹跳图标（看起来不喜欢同时使用em和px单位），但是animation-duration的作用与Chrome相同，后者使用的是设置为设置animation-duration规则的时间，并且在设置animation规则之前不会覆盖它。

问题

因此，理想情况下，我将能够以某种方式设置animation，而不必完全重置动画。我希望从一种速度平稳过渡到另一种速度，且图标不跳动。

这可能吗？

最佳答案

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

如果要更改动画的速度，则需要使用Javascript（与CSS动画几乎一样快，有时甚至比CSS动画快）

我特别喜欢Greensock和Velocity