css - 无论如何，我是否能够制作一个 block (一个变量)而不必重置其位置并继续进行？

Question

我最近一直在尝试使用 CSS 为我的加载面板测试一些东西，但我在让微调器完全旋转时遇到了一些困难。这是一个非常简单的代码，但遗憾的是它有一个烦人的问题。它绕着它的中心轴旋转，它决定当它到达 360° 时它会重新开始并回到 0° 而不是继续到 0°，如果它有点难以理解我很抱歉但基本上它需要完整的 240° 转而不是仅仅 90° 使其重新启动。 这是代码，

  0% {
    transform: rotate(0deg);
  }
    10% {
     transform: rotate(40deg)
    }
  20% {
    transform: rotate(80deg)
  }
    30% {
    transform: rotate(120deg)
    }
    40% {
    transform: rotate(160deg)
    }
  50% {
    transform: rotate(200deg)
  }
    60% {
    transform: rotate(240deg)
    }
  70% {
    transform: rotate(280deg)
  }
    80% {
    transform: rotate(320deg)

    }
    90% {
    transform: rotate(360deg)
    }
  100% {
    transform: rotate(-0deg)     
  }
}

您可能会看到它旋转到 360°，但随后无法继续到 0° 并一直回到 0°。有什么方法可以帮助/修复？

谢谢，

-大卫

Answer 1

您可以在 360 度停止动画，它会停止并且不会返回。 360deg 是一个完整的旋转。无需“返回”到 0。

img {
  animation: spin 2s infinite;
  max-width: 200px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  10% {
    transform: rotate(40deg)
  }
  20% {
    transform: rotate(80deg)
  }
  30% {
    transform: rotate(120deg)
  }
  40% {
    transform: rotate(160deg)
  }
  50% {
    transform: rotate(200deg)
  }
  60% {
    transform: rotate(240deg)
  }
  70% {
    transform: rotate(280deg)
  }
  80% {
    transform: rotate(320deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

<img src="http://images.gawker.com/twtjebkms5hvjr0wiinh/c_scale,fl_progressive,q_80,w_800.jpg">