css rotation without pausing

Question

I have this little image that I want to rotate continuously or at least have a shorter break between animations.

Here's a gif of the behaviour (it's a bit ugly because of my gif-record-software, but the pause is the thing I wish to highlight here):

My css (less):

.add{
vertical-align: middle;
    line-height: 35px;
    display: inline-block;
    margin-top: 8px;
    margin-left:5px;
    svg{
        fill:@colorOnBright;
        max-width: 30px;
        max-height: 25px;
        vertical-align: middle;
    }
}

.animated {
  animation-name: rotation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

markup:

<svg class="add animated" click.delegate="Add()">
     <use xlink:href="#add"></use>
</svg>

So, how do I get rid of the pause? or alternatively make the pause shorter.

Thanks in advance.

EDIT: I can't make sense of this.. I've tried recreating the thing in a pen, and it works just fine. Is there some other css-property that interferes with the animation somehow?

https://codepen.io/litari/pen/ajdpjp

edit2: If I inspect and view the animations, I get this:

So it goes from 0 to 360 degrees at 25% and for the remaining 75% it just stays at 360deg.

Answer 1

If I understand you correctly, replace:

.animated {
  animation-timing-function: ease;
}

with:

.animated {
  animation-timing-function: linear;
}

The linear timing-function value maintains the same speed throughout the animation.

^{https://www.smashingmagazine.com/2014/04/understanding-css-timing-functions/#linear}

div {
  display: inline-block;
}

.animated {
  animation-name: rotation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  transform-origin: center;
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}

.linear {
  animation-timing-function: linear;
}

<div class="animated">+</div>
<p>and with linear:</p>
<div class="animated linear">+</div>

Answer 2

Setting animation-timing-function: linear and -webkit-transform: rotate(360deg) works fine

        .animated {
          width: 50px;
          height: 50px;
          border-radius: 50%;
          background: black;
          animation-name: rotation;
          animation-duration: 2s;
          animation-iteration-count: infinite;
          animation-timing-function: linear;
        }
        
        @keyframes rotation {
          from {
            -webkit-transform: rotate(0deg);
          }
          to {
            -webkit-transform: rotate(360deg);
          }
        }
         
        .ball{
      width: 20px;
      height: 20px;
      background: red;
      border-radius: 50%;
         }
        

        
        <div class="animated">
          <div class="ball"></div>
        </div>