css3动画问题将div移动到左侧并将其移回

Question

我有以下代码将div移动到左边,

但我想要的是将它移动到左边然后再移回它,这应该自动播放..任何想法？

 div
    {
    width:100px;
    height:100px;
    background:red;
    -webkit-animation: mymove 5s infinite;
    animation: mymove 5s infinite;
    position:absolute;
    }

    @-webkit-keyframes mymove {
        from {left: 0px;}
        to {left: 200px;}
    }



    @keyframes mymove {
        from {left: 0px;}
        to {left: 200px;}
    }

谢谢!

Answer 1

你只需要添加animation-direction: alternate.它将从最后一个关键帧值设置动画.

div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-animation: mymove 5s infinite alternate;
  animation: mymove 5s infinite alternate;
  position: absolute;
  -webkit-backface-visibility: hidden;
}
@-webkit-keyframes mymove {
  from {
    left: 0px;
  }
  to {
    left: 200px;
  }
}
@keyframes mymove {
  from {
    left: 0px;
  }
  to {
    left: 200px;
  }
}

<div></div>