我正在通过带有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正在抢回它的起源。这是为什么?
答案 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/
答案 1 :(得分:2)
将此添加到CSS动画中。 animation-fill-mode: forwards;
目标将保留最后一个关键帧设置的计算值 执行期间遇到。遇到的最后一个关键帧取决于 animation-direction和animation-iteration-count的值:
<强> Link to the docs 强>
.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;
}