gpt4 book ai didi

CSS 关键帧 - 回到原点

转载 作者:行者123 更新时间:2023-12-04 15:59:54 26 4
gpt4 key购买 nike

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

最佳答案

animation-fill-mode: forwards;

此 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

关于CSS 关键帧 - 回到原点,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29567798/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com