A solução inicial foi 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).
Evoluindo a idéia
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>
O truque aqui foi mexer no pivô da animação, que vai do ponto superior esquerdo até o superior direito, usando translate()
, para que ao chegar na margem direita o objeto não saia da tela.
Aproveitei para alterar as medidas para simular a tela cheia sem borda, com o elemento realmente tocando nas margens.