CSS关键帧 - 回溯到原点

时间:2015-04-10 17:54:06

标签: css css3 css-animations

我正在通过带有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.

2 个答案:

答案 0 :(得分:3)

  

动画填充模式:转发;

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

enter image description here

答案 1 :(得分: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;
}