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>