CSS 3D立方体无限旋转动画无停顿实现问题

Got it, let's sort out that annoying pause between your cube's rotation loops! The issue here boils down to a default CSS animation behavior that's easy to fix.

What's Causing the Pause? #

By default, CSS animations use animation-timing-function: ease, which makes the animation slow down as it approaches the end of each cycle (right before hitting 360deg) and speed back up when starting the next loop. This slowdown/speedup creates that noticeable "stop-and-start" pause, even though rotating from 0deg to 360deg is a full circle.

The Fix #

All you need to do is add a linear timing function to your animation, which keeps the rotation speed completely consistent from start to finish. Here's the updated CSS for your .cube class:

.cube {
  position: relative;
  width: 200px;
  height: 200px;
  animation-name: rotation;
  animation-duration: 4s;
  animation-delay: 7s; /* Keep this if you want the initial 7s delay, remove it if not */
  animation-iteration-count: infinite;
  animation-timing-function: linear; /* Add this line to eliminate pauses! */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

For cleaner code, you can also use the animation shorthand syntax:

.cube {
  position: relative;
  width: 200px;
  height: 200px;
  animation: rotation 4s linear 7s infinite; /* Shorthand: name duration timing-function delay iteration-count */
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

Why This Works #

animation-timing-function: linear ensures the cube rotates at a constant speed throughout the entire animation cycle. There's no slowdown at the end of the rotation, so when the loop resets, the transition from 360deg back to 0deg is visually seamless (since those positions are identical, and the speed never changes).

Here's the full updated CSS with the fix included:

*, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; }
body { background-color: #eee; min-height: 100vh; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; }
.container { width: 400px; height: 400px; border: 2px solid white; border-radius: 4px; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; -webkit-perspective: 800px; perspective: 800px; -webkit-perspective-origin: top left; perspective-origin: top left; }
.cube { position: relative; width: 200px; height: 200px; animation: rotation 4s linear 7s infinite; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }
@keyframes rotation { from { transform: rotateZ(0deg) } to { transform: rotateZ(360deg) } }
.side { position: absolute; width: 100%; height: 100%; opacity: 0.9; border: 2px solid white; }
.front { background-color: #d50000; -webkit-transform: translateZ(100px); transform: translateZ(100px); }
.back { background-color: #aa00ff; -webkit-transform: translateZ(-100px); transform: translateZ(-100px); }
.left { background-color: #304ffe; -webkit-transform: rotateY(90deg) translateZ(100px); transform: rotateY(90deg) translateZ(100px); }
.right { background-color: #0091ea; -webkit-transform: rotateY(-90deg) translateZ(100px); transform: rotateY(-90deg) translateZ(100px); }
.top { background-color: #00bfa5; -webkit-transform: rotateX(90deg) translateZ(100px); transform: rotateX(90deg) translateZ(100px); }
.bottom { background-color: #64dd17; -webkit-transform: rotateX(-90deg) translateZ(100px); transform: rotateX(-90deg) translateZ(100px); }

Your HTML stays exactly the same as your original code. Now your cube will spin smoothly in a continuous loop with no pauses between rotations!

内容的提问来源于stack exchange，提问作者Falconcode