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>

Answer 2

设置animation-timing-function: linear和-webkit-transform: rotate(360deg)很好

        .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

尝试使用此小更改

 animation-timing-function: linear;
    animation-duration: 3s;
   -webkit-transform: rotate(360deg);

Answer 4

发现了问题！我的项目中某处已经有一个名为“旋转”的动画。更改名称，一切正常。

非常感谢您的回答

CSS旋转不暂停

4 个答案: