A solução inicial foi 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%;
      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;
    }

<!-- 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 meça os 100% contando o _padding_ que inserimos (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: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;
    }

<!-- 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.