css 旋转而不暂停

Question

我有这个小图像，我想连续旋转或者至少在动画之间有更短的休息时间。

这是该行为的 gif（由于我的 gif 记录软件，它有点难看，但暂停是我想在这里强调的事情）：

我的CSS（更少）：

.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);
  }
}

标记：

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

那么，如何摆脱暂停呢？或者缩短停顿时间。

提前致谢。

编辑： 我无法理解这一点..我尝试用笔重新创建这个东西，而且效果很好。是否有其他一些 css 属性会以某种方式干扰动画？

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

edit2： 如果我检查并查看动画，我会得到以下结果：

因此，它在 25% 时从 0 度变为 360 度，而对于其余 75%，它仅保持在 360 度。

Answer 1

如果我理解正确的话，请替换：

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

和：

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

线性计时函数值在整个动画中保持相同的速度。

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