我有一个动画,我希望它在整个过渡过程中以相同的速度移动。现在,动画开始很快,几乎到最后就开始变慢。
#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
,这是动画的定时功能,它以恒定的速度运行,没有延迟。让我们这样做:
#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>