如何使2 div的移动使用css相互平行

这是我用于我的项目的代码，但我希望广场在第一步之后一起向下移动。它应该使广场在同一时间下降并彼此相邻，但其中一个方块最终在第一个方块下方走向。任何方式来解决这个我找到了一个例子，但没有任何移动。 http://jsfiddle.net/AndrewL32/623ftfc2/如何使2 div的移动使用css相互平行

div { 
 
    position: relative; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    -webkit-animation: first 5s infinite; 
 
    -webkit-animation-direction: alternate; 
 
    animation: first 5s infinite; 
 
    animation-direction: alternate; 
 
} 
 

 
@-webkit-keyframes first { 
 
    0% { 
 
    background: red; 
 
    left: 0px; 
 
    top: 0px; 
 
    } 
 
    50% { 
 
    background: green; 
 
    left: 200px; 
 
    top: 0px; 
 
    } 
 
    100% { 
 
    background: blue; 
 
    left: 200px; 
 
    top: 200px; 
 
    } 
 
} 
 

 
#2 { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    -webkit-animation: second 5s infinite; 
 
    -webkit-animation-direction: alternate; 
 
    animation: second 5s infinite; 
 
    animation-direction: alternate; 
 
} 
 

 
@-webkit-keyframes second { 
 
    0% { 
 
    background: red; 
 
    left: 0px; 
 
    top: 0px; 
 
    } 
 
    50% { 
 
    background: green; 
 
    left: 200px; 
 
    top: 0px; 
 
    } 
 
    100% { 
 
    background: blue; 
 
    left: 200px; 
 
    top: 200px; 
 
    } 
 
}

<body> 
 
    <div><div id="2"></div></div> 
 
</body>

来源

2016-01-20 herman Singh

你的第二个'div'里面是你的第一个，因为他们的'position'性质的，它们相对于彼此定位。最简单的可能是将最后一个'top：200px'更改为'top：0'，但是您可能想要考虑让div的兄弟姐妹代替父子代 – CupawnTae

提供了错误的提琴？ –

你正在将两个动画应用到'div＃2' –

你的第二个div里面是你的第一个，因为它们的位置属性，它们相对于彼此定位。因此，当您为第一个div制作动画时，它会移动两个div，然后当您为第二个div分别制作动画时，它会进一步向下移动。

最简单的可能是更改最后一个顶端：200px到top: 0，但您可能需要考虑拥有divs兄弟姐妹而不是父子关系。

另外，idcan't start with a digit，所以我已经将"2"更改为"d2"下面。

div { 
 
\t position: relative; 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t background: red; 
 
\t -webkit-animation:first 5s infinite; 
 
\t -webkit-animation-direction: alternate; 
 
\t animation: first 5s infinite; 
 
\t animation-direction: alternate; 
 
} 
 
\t 
 
@-webkit-keyframes first{ 
 
\t 0% {background:red; left: 0px; top: 0px;} 
 
\t 50% {background:green; left: 200px; top: 0px;} 
 
\t 100% {background:blue; left: 200px; top: 200px;} 
 
} 
 

 
#d2 \t { 
 
\t position:absolute; 
 
\t width: 100px; 
 
\t height: 100px; 
 
\t background: red; 
 
\t -webkit-animation:second 5s infinite; 
 
\t -webkit-animation-direction: alternate; 
 
\t animation: second 5s infinite; 
 
\t animation-direction: alternate; 
 
} 
 

 
@-webkit-keyframes second{ 
 
\t 0% {background:red; left: 0px; top: 0px;} 
 
\t 50% {background:green; left: 200px; top: 0px;} 
 
\t 100%{background:blue; left: 200px; top: 0;} 
 
}

<div><div id="d2"></div></div>

来源

2016-01-20 16:32:24 CupawnTae

如何使2 div的移动使用css相互平行

回答

相关问题