CSS3动画从左向右移动,然后继续从外部移动到左
问题描述:
红色框出现在其containter中间当页面第一次加载,然后从移动从左到右,再出现这样的形象:CSS3动画从左向右移动,然后继续从外部移动到左
这里就是我这样做远,但它不适合上面的想法:
.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和箱宽度为1000像素。
答
您可以使用此:
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;
}
答
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>
哪一个你想继续从外面移动到左边?正方形或长方形? – EddNewGate
正方形是内容外部的矩形的一部分。这里只有一个移动对象:红色矩形 – Lee
您是否尝试过您的代码,看看它是如何工作的?在以您为例的发布的动画中,您将移动两个对象:从左到右的矩形和从右到左的正方形。发布代码后,您的动画甚至不会像您的示例那样移动。 – EddNewGate