关键帧动画回到初始状态 [英] Keyframe animation back to initial state
问题描述
我做了一个无限慢的 CSS3
动画。它从 top:0;
动画到 top:40px;
。错误是动画结束时,它会跳到起点。我认为应该以 ease
或 ease-in
跳跃,但这没有发生。我花了很多时间解决这个问题,但是失败了。
I did a slow infinite CSS3
animation. It animates from top:0;
to top:40px;
. The error is when the animate ends, it jumps to the start point. I think it should jump with ease
or ease-in
but that's not happening. I tried a lot to fix this, but I failed.
我需要返回转换以使轻松
I need the return transition to have an ease-in
effect.
我的代码:
span {
margin-left: 200px;
}
/** Down Slow Animation **/
@-webkit-keyframes downSlow {
from { top: 0px; }
to { top: 40px; }
}
@-moz-keyframes downSlow {
from { top: 0px; }
to { top: 40px; }
}
@keyframes downSlow {
from { top: 0px; }
to { top: 40px; }
}
.down-slow {
position: relative;
-webkit-animation: downSlow 1.5s infinite;
-moz-animation: downSlow 1.5s infinite;
animation: downSlow 1.5s infinite;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="down-slow"><i class="fa fa-angle-down fa-5x"></i></span>
推荐答案
这只是另一种解决方案
只需在动画
的末尾添加替代
。
span {
margin-left: 200px;
}
/** Down Slow Animation **/
@-webkit-keyframes downSlow {
from { top: 0px; }
to { top: 40px; }
}
@-moz-keyframes downSlow {
from { top: 0px; }
to { top: 40px; }
}
@keyframes downSlow {
from { top: 0px; }
to { top: 40px; }
}
.down-slow {
position: relative;
-webkit-animation: downSlow 1.5s infinite alternate;
-moz-animation: downSlow 1.5s infinite alternate;
animation: downSlow 1.5s infinite alternate;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="down-slow"><i class="fa fa-angle-down fa-5x"></i></span>
同一代码可以简化为
span {
margin-left: 200px;
top: 0px;
}
@-webkit-keyframes downSlow {
to { top: 40px; }
}
@-moz-keyframes downSlow {
to { top: 40px; }
}
@keyframes downSlow {
to { top: 40px; }
}
.down-slow {
position: relative;
-webkit-animation: downSlow 1.5s infinite alternate;
-moz-animation: downSlow 1.5s infinite alternate;
animation: downSlow 1.5s infinite alternate;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="down-slow"><i class="fa fa-angle-down fa-5x"></i></span>
更好的方法是使用 translate
这样,您的元素就不会干扰其他DOM元素
A much better approach would be to use translate
this way your element will not interfere with other DOM elements
span {
margin-left: 200px;
}
@-webkit-keyframes downSlow {
to { transform: translateY(40px) }
}
@-moz-keyframes downSlow {
to { transform: translateY(40px) }
}
@keyframes downSlow {
to { transform: translateY(40px) }
}
.down-slow {
position: relative;
-webkit-animation: downSlow 1.5s infinite alternate;
-moz-animation: downSlow 1.5s infinite alternate;
animation: downSlow 1.5s infinite alternate;
}
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="down-slow"><i class="fa fa-angle-down fa-5x"></i></span>
但是您也可以使用 prefixfree 来减少它在 cdn此处
But again you can reduce this with prefixfree frind a cdn here
span {
margin-left: 200px;
}
@keyframes downSlow {
to { transform: translateY(40px) }
}
.down-slow {
position: relative;
animation: downSlow 1.5s infinite alternate;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="down-slow"><i class="fa fa-angle-down fa-5x"></i></span>
最终设置速度为/ 2
at the end set speed/2
span {
margin-left: 200px;
}
@keyframes downSlow {
to { transform: translateY(40px) }
}
.down-slow {
position: relative;
animation: downSlow .7s infinite alternate forwards;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<span class="down-slow"><i class="fa fa-angle-down fa-5x"></i></span>
REF:动画填充模式
这篇关于关键帧动画回到初始状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!