我正在對父 div 中絕對定位的子 div 的左側位置進行動畫處理。動畫雖然確實有效，但當子 div 達到 50% ( 時50% {left:100%;}，它會超出其父級的邊界。A.) 為什么它只發生在 left: 100% 而不是 0% 時？B.) 如何讓子項在父項內移動 - 不離開父項右側？這是我的代碼：#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貢獻1839條經驗 獲得超15個贊
改變
@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貢獻1943條經驗 獲得超7個贊
#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) 減去動畫寬度。該問題是由于使用軸移動的動畫僅考慮一個點，而不是動畫寬度。
應該是跨瀏覽器的。
陪伴而非守候
TA貢獻1757條經驗 獲得超8個贊
您可以如下設置 50%。80% 使用父級和子級指定的寬度計算 ((500px-100px)/500px)
@keyframes animatedPos {
0% {
left: 0%;
}
50% {
left: 80%;
}
100% {
left: 0%;
}
}
- 4 回答
- 0 關注
- 222 瀏覽
添加回答
舉報
0/150
提交
取消