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>

Answer 2

以下代码应该可以使用

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

	    

	    position:absolute;
	    }

	    @-webkit-keyframes mymove {
	        0%   {left: 0px;}		    
		    50%  {left: 200px;}
		    100% {left: 0px;}
	    }



	    @keyframes mymove {
	        

	        0%   {left: 0px;}		    
		    50%  {left: 200px;}
		    100% {left: 0px;}
	    }

<div></div>