我正在對(duì)父 div 中絕對(duì)定位的子 div 的左側(cè)位置進(jìn)行動(dòng)畫處理。動(dòng)畫雖然確實(shí)有效，但當(dāng)子 div 達(dá)到 50% ( 時(shí)50% {left:100%;}，它會(huì)超出其父級(jí)的邊界。A.) 為什么它只發(fā)生在 left: 100% 而不是 0% 時(shí)？B.) 如何讓子項(xiàng)在父項(xiàng)內(nèi)移動(dòng) - 不離開父項(xiàng)右側(cè)？這是我的代碼：#parent { border:1px solid red; width:500px; height:200px; margin:100px auto; position:relative;}/* The element to apply the animation to */#child { width:100px; height:100px; border:1px solid blue; position:absolute; -webkit-animation:animatedPos 20s linear infinite; -o-animation:animatedPos 20s linear infinite; -moz-animation:animatedPos 20s linear infinite; animation:animatedPos 20s linear infinite;}/* The animation code */@-webkit-keyframes animatedPos { 0% {left:0%;} 50% {left:100%;} 100% {left:0%;}}@-o-keyframes animatedPos { 0% {left:0%;} 50% {left:100%;} 100% {left:0%;}}@-moz-keyframes animatedPos { 0% {left:0%;} 50% {left:100%;} 100% {left:0%;}}@keyframes animatedPos { 0% {left:0%;} 50% {left:100%;} 100% {left:0%;}}<div id="parent"> <div id="child"></div></div>
4 回答
紫衣仙女
TA貢獻(xiàn)1839條經(jīng)驗(yàn) 獲得超15個(gè)贊
改變
@keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
到
*{
box-sizing:border-box;
}
@keyframes animatedPos{
0%{
left:0;
}
50%{
left:calc(100% - 100px);
}
100%{
left:0;
}
}
楊__羊羊
TA貢獻(xiàn)1943條經(jīng)驗(yàn) 獲得超7個(gè)贊
#parent {
border:1px solid red;
width:500px;
height:200px;
margin:100px auto;
position:relative;
}
#uncle {
border:0px solid silver;
width:400px;
height:200px;
margin:0px auto;
position:absolute;
}
/* The element to apply the animation to */
#child {
width:100px;
height:100px;
border:1px solid blue;
position:absolute;
-webkit-animation:animatedPos 20s linear infinite;
-o-animation:animatedPos 20s linear infinite;
-moz-animation:animatedPos 20s linear infinite;
animation:animatedPos 20s linear infinite;
}
/* The animation code */
@-webkit-keyframes animatedPos {
0% {left:0%;}
50% {right:100%;}
100% {left:0%;}
}
@-o-keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
@-moz-keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
@keyframes animatedPos {
0% {left:0%;}
50% {left:100%;}
100% {left:0%;}
}
<div id="parent">
<div id="uncle">
<div id="child"></div>
</div>
</div>
這是一種解決方法，添加其他 Div(uncle) 減去動(dòng)畫寬度。該問題是由于使用軸移動(dòng)的動(dòng)畫僅考慮一個(gè)點(diǎn)，而不是動(dòng)畫寬度。
應(yīng)該是跨瀏覽器的。
陪伴而非守候
TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個(gè)贊
您可以如下設(shè)置 50%。80% 使用父級(jí)和子級(jí)指定的寬度計(jì)算 ((500px-100px)/500px)
@keyframes animatedPos {
0% {
left: 0%;
}
50% {
left: 80%;
}
100% {
left: 0%;
}
}
- 4 回答
- 0 關(guān)注
- 249 瀏覽
添加回答
舉報(bào)
0/150
提交
取消