css rotation without pausing - css

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>

Answer 3

Found the problem! There was already an animation called rotation somewhere in my project. Changed the name and everything works fine.
Thanks all for your answers

Answer 4

Try using this small change
animation-timing-function: linear;
animation-duration: 3s;
-webkit-transform: rotate(360deg);