css3动画从左向右移动，然后继续从外部向左移动

Question

当页面第一次加载时，红色框出现在其容器的中间，然后从左向右移动并重新出现，如下图所示：

​

​

以下是我到目前为止所做的，但它不符合上面的想法：

.box{
    -webkit-animation: left-to-right 10s infinite; /* Chrome, Safari, Opera */
    animation: left-to-right 10s infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes left-to-right {
    100%{
        left:-1000px
    }
}

@keyframes left-to-right {
    100%{
        left:-1000px
    }
}

页面宽度为1280px，框宽为1000px。

Answer 1

您可以使用以下命令：

http://codepen.io/anon/pen/dPEJzm

<div id="animated-example" class="animated shake"></div>



.animated { 
    -webkit-animation-duration: 5s; 
    animation-duration: 5s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 
} 

@-webkit-keyframes shake { 
    0%, 100% {-webkit-transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-50px);} 
    20%, 40%, 60%, 80% {-webkit-transform: translateX(50px);} 
} 
@keyframes shake { 
    0%, 100% {transform: translateX(0);} 
    10%, 30%, 50%, 70%, 90% {transform: translateX(-50px);} 
    20%, 40%, 60%, 80% {transform: translateX(50px);} 
} 
.shake { 
    -webkit-animation-name: shake; 
    animation-name: shake; 
}
.shake {
  background:red;
  height:100px;
  width:100px;

}

Answer 2

http://jsfiddle.net/bvjzmke5/3/

我让它在2秒内完成，并使用-50%来移动，以任何你想要的方式改变它。

.box{
    -webkit-animation: right-to-left 2s linear infinite; /* Chrome, Safari, Opera */
    animation: right-to-left 2s linear infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes right-to-left {

    100%{
        left:-50%
        }       
}

@keyframes left-to-right {

    100%{
        left:-50%
        }       

}

.square{
    -webkit-animation: left-to-right 2s linear infinite; /* Chrome, Safari, Opera */
    animation: left-to-right 2s linear infinite;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes left-to-right {

    100%{
        right:-50%
        }       
}

@keyframes left-to-right {
    100%{
        right:-50%
        }   
}

<div id="container" style="height:100px; width:60%; margin:0 auto">
<div class="box" style="height:100px; width:50%;background:red;position:relative;display:inline-block"></div>
<div class="square" style="height:100px; width:100px; background:red;position:relative;display:inline-block"></div>
</div>