'Absolute positioned animated child div goes out of its parent's boundary, how to fix it? [duplicate]

I am animating left position of an absolutely positioned child div within its parent div. The animation though does work but when child div reaches at 50% (50% {left:100%;}, it goes out of its parent's boundary.

A.) Why does it happen only for left: 100% and not for 0%?

B.) How to keep child moving within parent - not going out of parent on right hand side?

Here's my code:

#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>
htmlcss


Solution 1:[1]

Change 

@keyframes animatedPos {
  0% {left:0%;}
  50% {left:100%;}
  100% {left:0%;}
}

to

*{
  box-sizing:border-box;
}
@keyframes animatedPos{
  0%{
    left:0;
  }
  50%{
    left:calc(100% - 100px);
  }
  100%{
    left:0;
  }
}

Solution 2:[2]

#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>

This is a workaround adding other Div(uncle) subtracting the animation Width. The issue is due to the animation using the axis to move taking only one point in consideration, not the animation Width.

Should be cross-browser.

Solution 3:[3]

You should consider the width of the child and reduce it from 50%.

Solution 4:[4]

You can set 50% as below. 80% is calculated using width given for parent and child ((500px-100px)/500px)

@keyframes animatedPos {
 0% {
  left: 0%;
 }
 50% {
  left: 80%;
 }
 100% {
  left: 0%;
 }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Bohemian
Solution 3 S. Hesam
Solution 4 Radha

Related Questions