what will happen if i apply a jquery animation to an element which already have a css animation?

what will happen if i apply a jquery animation to an element which already have a css animation?

html:
  1. <div class="loader"></div> 
css:
  1. .loader{
  2. animation : turn 2s infinite;
  3. }
  4. @keyframes turn{
  5. /* turn a half round */
  6. }
js:
  1. var loader=$(".loader");
  2. loader.style.animationPlayState="paused";
  3. loader.animate({"transform":"rotate(360deg)"},300,"linear");
if i pause a css animation and then start a jquery animation,
what will happen?