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.