CSS关键帧-捕捉回原点

我正在通过使用JQuery的toggleClass切换一系列动画/转换

其中一个动画使用以下内容：

.header {
    transition: all .3s ease-in-out
}

.depth .header {
  animation: movement .3s;
  animation-delay: .3s;
  animation-iteration-count: 1;
}

keyframes movement {
  100% { top: 0px }
}

在动画结束时，div将捕捉回其原点。为什么会这样

---

将此添加到CSS动画中<代码>动画填充模式：正向

目标将保留最后一个关键帧设置的计算值 在执行过程中遇到。遇到的最后一个关键帧取决于 动画方向和动画迭代计数的值：

动画填充模式：正向

此CSS属性设置动画未运行时结束动画的状态。

否则动画将结束，您将只看到应用于非动画元素的CSS属性

您可以将以下内容添加到.depth.header中：

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

这就是您需要在此处保持动画状态的内容。 只需记住在需要设置动画的受影响div的类中定义它

.depth .header {
    -webkit-animation: movement .3s;
    -webkit-animation-delay: .3s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -moz-animation: movement .3s;
    -moz-animation-delay: .3s;
    animation: movement .3s;
    animation-delay: .3s;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

JsFiddle：

---

您使用的浏览器是什么？我没有遇到这个问题。我看到了Chrome的快速恢复。我没有在Firefox中看到任何类型的动画。正确，对于Firefox 5.0（5.0）到16.0（16.0），它需要-moz前缀才能工作：）另一个简单的问题是-为什么在chrome/safari中删除类时会出现快照？例如，您是否尝试过设置toggleClass的动画（添加jQuery UI）？看起来这并不能解决问题。我会继续玩它。是的……我想检查一下动画的数量，可能在任何地方使用反转都没有帮助：）

.depth .header {
    -webkit-animation: movement .3s;
    -webkit-animation-delay: .3s;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    -moz-animation: movement .3s;
    -moz-animation-delay: .3s;
    animation: movement .3s;
    animation-delay: .3s;
    animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}