CSS 关键帧 - 捕捉回原点答案

【问题标题】：CSS Keyframes - Snapping back to originCSS 关键帧 - 捕捉回原点
【发布时间】：2015-04-11 02:59:49
【问题描述】：

我正在切换一系列动画/过渡，这些动画/过渡是通过带有 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 会回弹到它的原点。这是为什么呢？

Here is a JSFiddle example of my issue.

【问题讨论】：

你用的是什么浏览器？我没有遇到这个问题。
我在 Chrome 中看到了快速恢复。我在 Firefox 中没有看到任何类型的动画。

标签： css css-animations

【解决方案1】：

动画填充模式：转发；

此 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：http://jsfiddle.net/a_incarnati/4147qf6k/34/

【讨论】：

正确，对于 Firefox 5.0 (5.0) 到 16.0 (16.0) 它需要 -moz 前缀才能工作:)
另一个快速的问题 - 为什么在 chrome / safari 中删除类时会出现捕捉？ codepen.io/MathiasaurusRex/pen/yydpBW
您是否尝试过为 toggleClass 设置动画（例如添加 jQuery UI）？ codepen.io/alexincarnati/pen/wBLyzB
看起来并不能解决问题。我会继续玩它的。
是的......我认为检查动画的数量，并且可能在任何地方使用反向都没有帮助:)

【解决方案2】：

将此添加到您的 CSS 动画中。 animation-fill-mode: forwards;

目标将保留最后一个关键帧设置的计算值执行过程中遇到。遇到的最后一个关键帧取决于 animation-direction 和 animation-iteration-count 的值：

Link to the docs

DEMO

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

【讨论】：