Skip to main content
4 de 8
adicionou 63 caracteres ao conteúdo
Largato
  • 92,9mil
  • 18
  • 190
  • 261

Uma solução simples é colocar um container para limitar a ação do objeto:

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

Aproveitei e dei uma ajustada no CSS. Quando você põe um valor zero, não deve especificar unidades.

A explicação é a seguinte: da forma que você fez a animação, o que está sendo animado é o canto superior esquerdo do objeto, então 100% significa que a margem esquerda estará no limite da tela (consequentemente o objeto estará para fora).

Colocando um padding do lado direito, da mesma largura do objeto, estamos compensando o tamanho deste.

A borda verde é apenas para você poder visualizar a animação funcionando corretamente. As margens que sobram em volta do container são do body, não tirei no CSS de exemplo, mas basta acrescentar no seu CSS uma regra para removê-las.

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).


Mexendo um pouco na estrutura:

Segue uma versão com uma div só, usando pseudo-elementos.

Aproveitei para alterar as medidas para simular a tela cheia sem borda, com o elemento realmente tocando nas margens:

@-webkit-keyframes anima{
    0%{ left: 0; }  
   50%{ left: 100%;}
  100%{ left: 0; }
}

body, html {
  position:relative;
  height:100%;
  margin:0;
  padding:0;
}

#ball {
  position:absolute;
  box-sizing:border-box;
  left:0;
  bottom:0px;
  width:100%;
  height:40px;
  padding-right:40px;
}

#ball:after {
  content:'';
  display:block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
  position: relative;
  top: 0;
  left: 0;
  -webkit-animation: anima 5s infinite linear;
}
<body>
  Demonstração:<br>
  <div id="ball"></div>  
</body>

Largato
  • 92,9mil
  • 18
  • 190
  • 261