如何动画div无限地从一端到另一端移动

Question

HTML

<div id="box"></div>

CSS

#box{
  width:50px;
  height:50px;
  background-color:red;
}

我想要div＆＃34; box＆＃34;从浏览器的左端移动到右端＆amp;继续像循环一样。 我怎么能单独用CSS做到这一点？

Answer 1

这样做很好：

#box {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: left-to-right 5s infinite; /* Chrome, Safari, Opera */
  animation: left-to-right 5s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes left-to-right {
  from {left: 0;}
  to {left: 100%;}
}

@keyframes left-to-right {
  from {left: 0;}
  to {left: 100%;}
}