CSS 旋转 359 与旋转 360 的区别

Question

我想这比任何东西都更具学术性，但我有一个要设置为无限旋转的元素，我必须在我的 CSS 文件中添加它（是的，我有我的 moz 和 webkit 声明在那里也是，但这与这里无关）

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

在这里不设置 360 似乎很奇怪，但它似乎可以与 359 一起使用。360 只是等同于 0 还是什么？试图了解其工作原理以及是否存在实际差异。

Answer 1

360 为 0，一个圆有 360 度。所以 360 会带你转一圈，回到 0。

Answer 2

使用这个，因为在无限动画上，如果结束和开始相同，那么开始下一个循环时会有延迟..

具有相同表示的 0 度和 360 度将分别消耗动画的一个步骤。

Answer 3

tldr：

/********* CORRECT *********/

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/********* NOT CORRECT *********/

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}

完整解释：

以下语法是等价的，都可以产生完美平滑连续的无限循环动画：

@keyframes spin-turn {
  from { transform: rotate(0turn); }
  to { transform: rotate(1turn); }
}
@keyframes spin-grad {
  from { transform: rotate(0grad); }
  to { transform: rotate(400grad); }
}
@keyframes spin-deg {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes spin-rad {
  from { transform: rotate(0rad); }
  to { transform: rotate(6.28318530718rad); } /* 2 × π */
}

最重要的是，在100% 和0% 之间没有动画步骤。

在动画迭代之间过渡时，100% 对应的帧不会被渲染。浏览器使用它的值来计算直到它的所有中间帧（它们的数量取决于设备刷新率和浏览器渲染引擎，而不是使用的 CSS 单元）。当下一次动画迭代存在时，将100%对应的帧替换为下一次迭代的第一帧（0%）。
100% 帧仅在 animation-iteration-count 是一个正有限数时渲染，在所有迭代计数都已播放之后。换句话说，当动画停止时。

---

因此，使用to: { transform: rotate(359deg); } 会在恰好1deg 的动画中产生向前跳跃。这是一个等于0.2(7)% 的一整圈的跳跃，因此在动画元素较小或动画速度相对较快时几乎不会被注意到。

这是一个比较不同语法的工具。在顶部（雷达线到达圆的北点时）可以观察到向前跳跃，动画语法选择deg-359，动画时长10秒以上。

new Vue({
  el: '#app',
  data: () => ({
    units: ['turn', 'grad', 'rad', 'deg', 'deg-359'],
    animation: 'spin-deg-359',
    duration: 18
  }),
  computed: {
    rotatorStyle() {
      return {
        animation: `${this.animation} ${this.duration}s linear infinite`
      }
    }
  }
})

body {
  margin: 0;
}
* { box-sizing: border-box; }
.controls > div {
  display: flex;
  padding: 3px 0;
}
.controls {
  padding: 1rem;
}
.controls label {
  width: 80px;
}
input[type="number"] {
  width: 73px;
}
#app {
  height: 100vh;
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-evenly;
  overflow: hidden;
}
.ratio {
  display: grid;
  width: calc(100vh - 2rem);
}
@media(max-width: 767.98px) {
  #app {
    flex-direction: column;
    height: auto;
  }
  .ratio {
    width: 100%;
    flex: 0 0 auto;
  }
}
.ratio > * {
  grid-area: 1/1;
}
.rotator {
  display: flex;
  border: 1px solid red;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  position: relative;
}
.rotator:before {
  content: '';
  position: absolute;
  left: 50%;
  width: 50%;
  height: 0;
  top: 50%;
  transform: rotate(-90deg);
  transform-origin: 0 0;
  border-bottom: 1px solid red;
}

@keyframes spin-deg {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes spin-deg-359 {
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
}
@keyframes spin-rad {
  from { transform: rotate(0rad); }
  to { transform: rotate(6.28318530718rad); }
}
@keyframes spin-turn {
  from { transform: rotate(0turn); }
  to { transform: rotate(1turn); }
}
@keyframes spin-grad {
  from { transform: rotate(0grad); }
  to { transform: rotate(400grad); }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="controls">
    <div>
      <label for="duration">duration</label>
      <input id="duration" v-model="duration" type="number">s
    </div>
    <div>
      <label for="animation">animation</label>
      <select id="animation" v-model="animation">
        <option v-for="unit in units" :key="unit" :value="'spin-' + unit">{{unit}}</option>
      </select>
    </div>    
  </div>
  <div class="ratio">
    <svg viewBox="0 0 1 1"></svg>
    <div class="rotator"
       :style="rotatorStyle"></div>
   </div>
  
</div>

当您增加屏幕尺寸（全页模式）或增加动画持续时间（即：30s）时，跳跃变得更加明显。