Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Constant animation speed CSS

Tags:

css

I have an animation and I want it to move with the same speed throughout the transition. Right now, the animation begins fast and almost at 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>
like image 519
GusDev Avatar asked Nov 15 '25 18:11

GusDev


1 Answers

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>
like image 157
Praveen Kumar Purushothaman Avatar answered Nov 18 '25 06:11

Praveen Kumar Purushothaman



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!