恒定的动画速度CSS [英] constant animation speed CSS
本文介绍了恒定的动画速度CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个动画,我想让动画在所有过渡上都做同样的动作,在我动画开始的很快,而几乎在结尾开始变慢.
i have an animation and i want to make the animation do the same move on all the transition, on what i have the animation begin fast and almost on the end begins to slow down.
#tableNews {
overflow: hidden;
margin-right: 5%;
width:90%;
position: relative;
-webkit-animation: mymove 15s infinite; /* Chrome, Safari, Opera */
animation: mymove 15s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 60px;}
to {top: -200px;}
}
@keyframes mymove {
from {top: 60px;}
to {top: -200px;}
}
<table id="tableNews" class="TableList" border="0" width="100%" style="overflow:hidden;">
<tbody>
<tr class="new-separator">
<td>
<table>
<tr>
<td><a href="#"></a><hr></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
推荐答案
我想它正在使 ease
变得容易.如果您提供选项 linear
,即动画的
I guess it is making an ease
. If you give an option linear
, which is the animation's timing function, that works with constant speed and no delay. Let's do this way:
#tableNews {
overflow: hidden;
margin-right: 5%;
width:90%;
position: relative;
-webkit-animation: mymove 15s linear infinite; /* Chrome, Safari, Opera */
animation: mymove 15s linear infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 60px;}
to {top: -200px;}
}
@keyframes mymove {
from {top: 60px;}
to {top: -200px;}
}
<div id="tableNews">Hi</div>
这篇关于恒定的动画速度CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文