A solução inicial foi colocar um _container_ para limitar a ação do objeto: <!-- begin snippet: js hide: false --> <!-- language: lang-css --> @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; } <!-- language: lang-html --> <body> <div id="container"> <div id="circle"></div> </div> </body> <!-- end snippet --> 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 considere 100% incluindo o _padding_ que inserimos na medida (e até a borda verde). <br>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: <!-- begin snippet: js hide: false --> <!-- language: lang-css --> @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; } <!-- language: lang-html --> <body> <div id="ball1"></div> <div id="ball2"></div> </body> <!-- end snippet --> 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.