CSS Animation with an infinitely rotating cube-CodePudding

I am trying to make an animation of a rotating cube in 3D but the problem is i want the animation to not have any delay between rotations and i just cant get it to work, right now the cube rotates but it stops for a second before it starts the next rotating animation. Thıs ıs the Code Pen lınk:

code pen link >>https://codepen.io/falconcode95/pen/Vwyzpdj

CodePudding user response：

Rotation stops because of the default animation-timing-function which by default is ease.
So it starts and ends very slowly.
Try to use another value linear.
As the word suggests Linear starts and ends linearly.
For more explanation see this

Code snippet

*,
*::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-name: rotation;
  animation-duration: 4s;/*SPEED*/
  animation-delay: 7s;/*REMOVE IF NEEDED*/
  animation-iteration-count: infinite;
  animation-timing-function: linear;/*EDITED HERE*/
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

@keyframes rotation {
  from {
    transform: rotateZ(0deg)
  }
  /* 
  50% {
    transform: rotateZ(360deg);
  } */
  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);
}

<div >
  <div >
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
  </div>
</div>

CodePudding user response：

Easy: just add animation-timing-function: linear; to the .cube code.

EDIT: nvm the other answer is better.