css animation not rotating the box-CodePudding

** why box not rotating but its translating the box . translateX is working but rotate is not working in animation **

<style>
 .box{
   height: 20px;
   width: 20px;
   background-color: red;
animation: animate 1s linear infinite alternate;
}
@keyframes animate{
  0%{
    transform: translateX(100px);
  }
  100%{
    transform: rotate(360deg);
  }
}
</style>

<div >
</div>

CodePudding user response：

You need to add both the transform properties in the keyframe, take a look at the snippet below

.box{
  height: 20px;
  width: 20px;
  background-color: red;
  animation: animate 1s linear infinite alternate;
}
@keyframes animate{
  0%{
    transform: translateX(100px) rotate(0deg);
  }
  100%{
    transform: translateX(0) rotate(360deg);
  }
}

<div >
</div>

CodePudding user response：

This is because it cannot rotate 360deg at the end of the animation. Almost anything below 360deg will work. Please provide an illustration or video of the result you are trying to accomplish if this solution is not exactly what you want.

<style>
  .box {
    height: 20px;
    width: 20px;
    background-color: red;
    animation: animate 1s linear infinite alternate;
  }
  @keyframes animate {
    0% {
      transform: translateX(100px);
    }
    100% {
      transform: rotate(180deg);
    }
  }
</style>

<div ></div>

However if you only want it to spin 360deg and not translateX, you can do it using:

<style>
  .box {
    height: 20px;
    width: 20px;
    background-color: red;
    animation: animate 1s linear infinite alternate;
  }
  @keyframes animate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>

<div ></div>