Skip to main content
acertei um pouco a grafia; para IE eu testo melhor depois.
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Para finalizar, o box-sizing:border-box; faz com que nosso container de 100% de largura meça osconsidere 100% contandoincluindo o padding que inserimos na medida (e até a borda verde).

Para finalizar, o box-sizing:border-box; faz com que nosso container de 100% de largura meça os 100% contando o padding que inserimos (e até a borda verde).

Para finalizar, o box-sizing:border-box; faz com que nosso container de 100% de largura considere 100% incluindo o padding que inserimos na medida (e até a borda verde).

Tentando atender ao IE 11 também
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
@-webkit-keyframes@keyframes anima{
    0%{ left: 0; }  
   50%{ left: 100%;}
  100%{ left: 0; }
}

#container {
  width:100%;
  box-sizing:border-box;
  position:relative;
  padding-right:40px;
  border:1px solid green;
}

#circle{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
  position: relative;
  top: 0;
  left: 0;
  -webkit-animation: anima 8s infinite;
}
<body>
  <div id="container">
    <div id="circle"></div>
  </div>  
</body>
@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:translatetranslateX(0,0); }    
  50%{ left:100%;transform:translatetranslateX(-100%,0); }
  100%{ left:0;transform:translatetranslateX(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-animationtransform: anima 5s infinite ease-in-out;translateX(0);
  -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>
@-webkit-keyframes anima{
    0%{ left: 0; }  
   50%{ left: 100%;}
  100%{ left: 0; }
}

#container {
  width:100%;
  box-sizing:border-box;
  position:relative;
  padding-right:40px;
  border:1px solid green;
}

#circle{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
  position: relative;
  top: 0;
  left: 0;
  -webkit-animation: anima 8s infinite;
}
<body>
  <div id="container">
    <div id="circle"></div>
  </div>  
</body>
@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>
@keyframes anima{
    0%{ left: 0; }  
   50%{ left: 100%;}
  100%{ left: 0; }
}

#container {
  width:100%;
  box-sizing:border-box;
  position:relative;
  padding-right:40px;
  border:1px solid green;
}

#circle{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
  position: relative;
  top: 0;
  left: 0;
  animation: anima 8s infinite;
}
<body>
  <div id="container">
    <div id="circle"></div>
  </div>  
</body>
@keyframes anima{
  0%{ left:0;transform:translateX(0); } 
  50%{ left:100%;transform:translateX(-100%); }
  100%{ left:0;transform:translateX(0); }
}

#ball1, #ball2 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
  position: relative;
  left:0;
  transform:translateX(0);
  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>
adicionou 111 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261

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>

Depois de uma conversa nos comentários, saiu a seguinte idéia, bem mais clean, e que não depende de container nenhum, e independe do tamanho do objeto:

@-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;
}

#ball2 {
  width:100px;
  height:100px;
  background-color:blue;
}

body, html {
  margin:0;
  padding:0;
}
<body>
  <div id="ball1"></div>  
  <div id="ball2"></div>  
</body>

Depois de uma conversa nos comentários, em 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, cheguei a uma conclusão mais limpa, que não depende de container, e se 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>
removeu 54 caracteres do conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
Carregando
adicionou 63 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
Carregando
adicionou 63 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
Carregando
adicionou 63 caracteres ao conteúdo
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
Carregando
Fonte Link
Largato
  • 92,9mil
  • 18
  • 190
  • 261
Carregando