Uma solução simples é colocar um _container_ para limitar a ação do objeto: <!-- begin snippet: js hide: false --> <!-- language: lang-css --> @-webkit-keyframes anima{ 0%{ left: 0; } 50%{ left: 100%;} 100%{ left: 0; } } #container { width:100%; position:relative; padding-right:40px; border:1px solid green; /* apenas para visualização */ } #circle{ width: 40px; height: 40px; border-radius: 50%; background-color: red; position: relative; top: 0; left: 0; -webkit-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.