css - 如何让一个圆圈同时移动和旋转？

Question

基本上，圆圈像轮胎一样从左向右旋转。我尝试应用 transform rotate 360​​ 但它不起作用。

html:

 <div class="circle"></div>

CSS:

 .circle{
   height: 100px;
   width: 100px;
   background-color: green;
   border-radius: 10px;
   -webkit-animation:movespin 4s ease-in-out;
   animation:movespin 4s ease-in-out;
 }

 @-webkit-keyframes movespin {
   0% {
     transform: translateX(0px);
     transform:rotate(360deg);
   }
   100% {
    transform: translateX(900px);
    transform:rotate(360deg);
   }
 }

Answer 1

把它们放在一起。

.circle {
  height: 100px;
  width: 100px;
  background-color: green;
  border-radius: 10px;
  -webkit-animation: movespin 4s ease-in-out;
  animation: movespin 4s ease-in-out;
}

@-webkit-keyframes movespin {
  0% {
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    transform: translateX(900px) rotate(360deg);
  }
}

<div class="circle"></div>