在最后一帧停止CSS3动画

我有一个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); }
}

您正在寻找：

animation-fill-mode: forwards;

---

和浏览器支持列表。

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

我今天了解到，填充模式有一个限制。这是来自苹果公司的一位开发人员。谣传大约是六个，但不确定。

---

或者，您可以将类的初始状态设置为希望动画结束的方式，然后从/0%开始*初始化*它。

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

---

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

最好的方法似乎是将最终状态放在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;}
}  

如果要将此行为添加到速记
动画
属性定义中，子属性的顺序如下

动画名称
-默认值
无

动画持续时间
-默认值
0s

动画计时功能
-默认
轻松

动画延迟
-默认值
0s

动画迭代计数
-默认值
1

动画方向
-默认
正常

动画填充模式
-您需要将此设置为
转发

动画播放状态
-默认运行

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

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

见

浏览器支持

• Chrome 43.0（4.0-webkit-）
• IE 10.0
• Mozilla 16.0（5.0-moz-）
• Shafari 4.0-webkit-
• Opera15.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;
  }
}

---

实际上没有人把它带来，所以它的工作方式设置为暂停。

嘿，尼克，你能发布你正在使用的css和html吗？嗨，塞巴斯蒂安，我已经用css和javascript更新了我的问题。我现在使用的唯一html是一个带有onclick的div来启动函数rotate。你知道它是否可以在chrome中使用吗？没有任何运气，请接受这一正确答案。关于这一点的更多解释：@user531192对于Chrome/Webkit浏览器，您必须使用

-Webkit动画填充模式：转发

Chrome现在不再需要-webkit-前缀（至少从v49开始）。我遇到的一个问题是，我没有设置

100%{}

或

to{}

，所以即使使用

动画填充模式：forwards我的动画仍然会在
0%
处转储我。（我使用了一些@for循环来创建我的动画，但忘记了从{}

和{}手动添加一个

）；这很好，我认为这是解决这个问题的最好方法。如果使用动画延迟，它从结束状态开始，重置为0%，然后动画设置为100%。不理想，视觉上不和谐。
.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;
  }
}