Depois de uma conversa nos comentários, saiu a seguinte idéiaem que o autor perguntou da possibilidade de se ter uma solução onde não tenha que se saber de antemão o tamanho do padding, bemcheguei a uma conclusão mais cleanlimpa, e que não depende de container nenhum, e independe dose ajusta ao tamanho do objeto:
@keyframes anima{
0%{ left:0;transform:translate(0,0); }
50%{ left:100%;transform:translate(-100%,0); }
100%{ left:0;transform:translate(0,0); }
}
@-webkit-keyframes anima{
0%{ left:0;transform:translate(0,0); }
50%{ left:100%;transform:translate(-100%,0); }
100%{ left:0;transform:translate(0,0); }
}
#ball1, #ball2 {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: red;
position: relative;
left:0;
animation: anima 5s infinite ease-in-out;
-webkit-animation: anima 5s infinite ease-in-out;
-moz-animation: anima 5s infinite ease-in-out;
}
#ball2 {
width:100px;
height:100px;
background-color:blue;
}
body, html {
margin:0;
padding:0;
}
<body>
<div id="ball1"></div>
<div id="ball2"></div>
</body>