如何用CSS3动画div来移动和旋转？

Question

我正在尝试为div设置动画以旋转360度并向右移动400px。我怎么能用CSS3做到这一点？我需要使用CSS3关键帧吗？

<div id="spin"></div>

CSS：

#spin {
   width:200px;
   height:200px;
   background-color:blue;
}

Answer 1

是的，您需要关键帧：

#spin {
    width: 200px;
    height: 200px;
    background-color: blue;
    -webkit-animation: myanimation 5s;
    animation: myanimation 5s;
}

@-webkit-keyframes myanimation {
    100% { margin-left: 400px; -webkit-transform: rotate(360deg); }
}

@keyframes myanimation {
    100% { margin-left: 400px; transform: rotate(360deg); }
}

<div id="spin"></div>

Answer 2

添加所有前缀，使其适用于所有现代浏览器

-webkit-
-moz-
-ms-
-o-

Answer 3

尝试此操作并根据您的需求进行调整：

#spin {
  position: absolute;
  width: 200px;
  height: 200px;
  background: #00f;
  -webkit-animation-name: spin;
  -webkit-animation-duration: 4000ms;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -moz-animation-name: spin;
  -moz-animation-duration: 4000ms;
  -moz-animation-iteration-count: infinite;
  -moz-animation-timing-function: linear;
  -ms-animation-name: spin;
  -ms-animation-duration: 4000ms;
  -ms-animation-iteration-count: infinite;
  -ms-animation-timing-function: linear;
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
    left: 0px;
  }
  to {
    transform: rotate(360deg);
    left: 400px;
  }
}

<div id="spin"></div>