CSS 关键帧 - 回到原点

Question

我正在使用 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.

Answer 1

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

The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of animation-direction and 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;
}

Answer 2

animation-fill-mode: forwards;

这个CSS属性设置结束动画时的状态运行.

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

您可以添加到您的 .depth .header：

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

这就是您在此处保持动画状态所需要的。请记住在需要动画的受影响 div 的 class 中定义它。

.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/

CSS 关键帧 - 回到原点

CSS Keyframes - Snapping back to origin

css

css-animations