Skip to main content
7 de 8
Tentando atender ao IE 11 também
Largato
  • 92,9mil
  • 18
  • 190
  • 261

A solução inicial foi colocar um container para limitar a ação do objeto:

@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;
}
<body>
  <div id="container">
    <div id="circle"></div>
  </div>  
</body>

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


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:

@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;
}
<body>
  <div id="ball1"></div>  
  <div id="ball2"></div>  
</body>

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.

Largato
  • 92,9mil
  • 18
  • 190
  • 261