css旋转而不暂停

Question

我有这个小图像，我想连续旋转或至少在动画之间有一个较短的间隔。

这是行为的 gif(由于我的 gif-record-software，它有点难看，但暂停是我想在这里强调的事情):

我的 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

编辑2:如果我检查并查看动画，我会得到以下信息:

所以它在 25% 时从 0 度变为 360 度，而对于剩余的 75%，它只停留在 360 度。

Answer 1

如果我理解正确，请替换:

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

与:

.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>