css旋转不暂停答案

【问题标题】：css rotation without pausingcss旋转不暂停
【发布时间】：2018-07-16 21:41:00
【问题描述】：

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

这是一个行为的 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

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

所以它在 25% 时从 0 度到 360 度，剩下的 75% 则保持在 360 度。

【问题讨论】：

你试过改变动画定时功能：easy;动画定时功能：线性； ?
或：缓进出。您的动画没有暂停，它只会跳 1 度重新开始。（全旋转为 360 度）缓入出演示 codepen.io/anon/pen/vaLgNZ
线性和 eas-in-out 都不适合我。仍然有同样的停顿
那么您需要在动画中添加更多步骤并调整这些步骤以达到您期望的结果（不再需要-webkit-前缀，或者也应该在关键帧和动画上使用......）

标签： css css-animations

【解决方案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>

【讨论】：

我在帖子中添加了一支笔。在那里工作正常，但不在我的代码中：S
@JohanHjalmarsson 我刚刚将 sn-p 添加到我的答案中，这样您就可以看到它正在工作。
关于您的编辑： 1. 也许有另一个角色（来自框架或任何东西）它会覆盖您的风格。 2. 如果你不是。不知何故，使用 from 和 to 但自定义百分比数字。
我正在使用 Aurelia。我会检查元素，看看是否发生了奇怪的事情。如果我跟随你的 sn-p，我的仍然会暂停。
我的旋转速度也更快。停顿与我的持续时间有关。所以我认为当我有 2 秒的持续时间时，它会旋转 1 秒并暂停 1 秒

【解决方案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>

【讨论】：

仍然没有区别：我已经尝试过 FF 和 chrome。你的例子有效，但我的仍然暂停..
尝试清除浏览器历史记录。如果可能的话，把你的代码发给我sn-p

【解决方案3】：

试试这个小改动

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

【讨论】：

【解决方案4】：

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

感谢大家的回答

【讨论】：