Question

我有一个动画，我想让动画在所有过渡中做同样的动作，我的动画开始快速，几乎在最后开始减速。

＆＃13;

#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;}
}

＆＃13;

<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>

＆＃13;

Answer 1

我猜它正在制作ease。如果你给出一个选项linear，这是动画的timing function，它可以恒定速度而且没有延迟。我们这样做：

#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

1 个答案: