在最后一帧停止 CSS3 动画答案

【问题标题】：Stopping a CSS3 Animation on last frame在最后一帧停止 CSS3 动画
【发布时间】：2016-07-11 22:50:16
【问题描述】：

我在点击时播放了 4 部分 CSS3 动画 - 但动画的最后一部分是为了将其从屏幕上移开。

但是，一旦播放完毕，它总是会恢复到原来的状态。任何人都知道我如何在它的最后一个 css 帧 (100%) 上停止它，或者如何在它播放后摆脱它所在的整个 div。

@keyframes colorchange {
  0%   { transform: scale(1.0) rotate(0deg); }
  50%  { transform: rotate(340deg) translate(-300px,0px) }
  100% { transform: scale(0.5) rotate(5deg) translate(1140px,-137px); }
}

【问题讨论】：

嗨，尼克，你能把你正在使用的 css 和 html 贴出来吗？
嗨塞巴斯蒂安，我已经用 css 和 javascript 更新了我的问题。我使用的唯一 html 是一个带有 onclick 的 div 来启动函数旋转。
Can't stop animation at end of one cycle 的可能重复项

标签： css css-animations

【解决方案1】：

您正在寻找：

animation-fill-mode: forwards;

More info on MDN 和canIuse 上的浏览器支持列表。

【讨论】：

你知道这是否适用于 chrome 吗？运气不好
请接受这个作为正确答案。关于这个的更多解释：4waisenkinder.de/blog/2014/10/13/…
@user531192 对于 Chrome/Webkit 浏览器，您必须使用 -webkit-animation-fill-mode: forwards;
Chrome 现在不再需要 -webkit- 前缀了（至少从 v49 开始）
我遇到的一个问题是我没有设置100% {} 或to {}，所以即使使用animation-fill-mode: forwards;，我的动画仍然会在0% 上甩给我。（我使用一些@for 循环来创建动画，忘记手动添加from{}和to{}）；

【解决方案2】：

如果要将此行为添加到简写animation 属性定义中，子属性的顺序如下

animation-name - 默认 none

animation-duration - 默认 0s

animation-timing-function - 默认 ease

animation-delay - 默认 0s

animation-iteration-count - 默认 1

animation-direction - 默认 normal

animation-fill-mode - 您需要将其设置为 forwards

animation-play-state - 默认 running

因此，在最常见的情况下，结果会是这样的

animation: colorchange 1s ease 0s 1 normal forwards;

见MDN documentation here

【讨论】：

【解决方案3】：

-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
animation-fill-mode: forwards;

浏览器支持

Chrome 43.0 (4.0 -webkit-)
IE 10.0
Mozilla 16.0 (5.0 -moz-)
Shafari 4.0 -webkit-
Opera 15.0 -webkit- (12.112.0 -o-)

用法：-

.fadeIn {
  animation-name: fadeIn;
    -webkit-animation-name: fadeIn;

    animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease;
    -webkit-animation-timing-function: ease;

     animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

【讨论】：

【解决方案4】：

最好的方法似乎是将最终状态放在 css 的主要部分。像这里，我把宽度设置为220px，这样它最终变成了220px。但是开始0px;

div.menu-item1 {
  font-size: 20px;
  border: 2px solid #fff;
  width: 220px;
  animation: slide 1s;
  -webkit-animation: slide 1s; /* Safari and Chrome */
}
@-webkit-keyframes slide { /* Safari and Chrome */
  from {width:0px;}
  to {width:220px;}
}

【讨论】：

这太好了，我认为处理这个问题的最好方法。
如果你使用动画延迟，它从结束状态开始，重置为 0%，然后动画到 100%。不理想且视觉上不和谐。

【解决方案5】：

您将 webkitAnimationName 设置为空不是您的问题，以便将对象的 CSS 重置为默认状态。如果您只是删除正在重置状态的 setTimeout 函数，它不会停留在最终的位置吗？

【讨论】：

【解决方案6】：

我刚刚发布了一个类似的答案，您可能想看看：

http://www.w3.org/TR/css3-animations/#animation-events-

您可以找出动画的各个方面，例如开始和停止，然后，一旦说“停止”事件已触发，您就可以对 dom 做任何您想做的事情。我前段时间试过这个，它可以工作，但我猜你暂时会被限制在 webkit 上（但你可能已经接受了）。顺便说一句，由于我已经为 2 个答案发布了相同的链接，我会提供这个一般性建议：查看 W3C - 他们几乎编写了规则并描述了标准。此外，webkit 开发页面非常关键。

【讨论】：

【解决方案7】：

实际上没有人带来它，它的工作方式是 animation-play-state 设置为暂停。

【讨论】：

【解决方案8】：

我今天了解到，填充模式有一个限制。这是来自 Apple 开发人员。谣言是 * 大约 * 六，但不确定。或者，您可以将类的初始状态设置为您希望动画结束的方式，然后 * 将其初始化为 from / 0% 。

【讨论】：