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.