2

Fiz uma animação básica de uma div que oscila entre o lado esquerdo e direito da tela por tempo indeterminado. Ocorre que ao chegar ao extremo direito da tela, a div ultrapassa o campo visível fazendo com que parte dela desapareça. Gostaria que a div respeitasse o tamanho da tela e nunca ultrapassasse 100%. Não posso usar 95% em left, pois o percentual vai variar de acordo com a resolução do usuário. Preciso que seja preciso para qualquer resolução.

Segue o fiddle: https://jsfiddle.net/3xt9zc6c/

@-webkit-keyframes anima{
    0%{
        top: 0px;
        left: 0px;
    }   
    50%{
        top: 0px;
        left: 100%;
    }
    100%{
        top: 0px;
        left: 0px;
    }
}
#circle{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: red;
    position: relative;
    top: 0px;
    left: 0px;
    -webkit-animation: anima 8s infinite;
}
<body>
    <div id="circle"></div>
</body>

2 Respostas 2

4

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 considere 100% incluindo o padding que inserimos na medida (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.

6
  • ok entendi. Agora me responda uma coisa, na qual inicialmente estava pensando e não coloquei na pergunta. E se o tamanho da bola vermelha fosse dinâmico, isto é, se o width e height fossem variáveis (controlados por javascript ou no servidor), existe alguma solução na qual eu não preciso definir o padding-right:40px? Isso seria interessante pois teria uma solução mais genérica.
    – Savrige
    Commented 29/11/2015 às 18:56
  • É bem diferente essa demanda da proposta da pergunta original. Vou dar uma pensada aqui. Se bem que se for controlar por JS ou pelo servidor, basta mudar as propriedades nos dois lugares, não? (tanto no objeto quanto no container)
    – Largato
    Commented 29/11/2015 às 18:58
  • o tamanho da bola seria mudada programaticamente via JS. Aí teria que mudar programaticamente o padding-right também... acho que funciona. Mas ficaria mais "clean" se tivesse alguma forma de deixar isso em CSS puro.
    – Savrige
    Commented 29/11/2015 às 19:02
  • pensei em usar a função calc() do css, mas não sei se seria possível nesse contexto
    – Savrige
    Commented 29/11/2015 às 19:03
  • 1
    show! agora ficou top.
    – Savrige
    Commented 29/11/2015 às 19:57
1

Basta acrescentar um margin-left: -40px, já que o #circle tem um width: 40px.

Funcionando aqui: https://jsfiddle.net/3xt9zc6c/1/

@keyframes anima{
    0%{
        top: 0px;
        left: 0px;
    }   
    50%{
        top: 0px;
        left: 100%;
        margin-left: -40px;
    }
    100%{
        top: 0px;
        left: 0px;
    }
}
#circle{
width: 40px;
height: 40px;
border-radius: 50%;
background-color: red;
position: relative;
top: 0px;
left: 0px;
-webkit-animation: anima 8s infinite;
-moz-animation: anima 8s infinite;
animation: anima 8s infinite;
        transition: all 0.4s ease-in-out;
}
    <div id="circle"></div>

4
  • o animate parou de funcionar, ele não faz a animação de modo contínuo.
    – Savrige
    Commented 29/11/2015 às 17:35
  • No meu caso funciona, se estiver usando o Google Chrome, tente acrescentar outro animation, desta vez sem o -webkit-. Commented 29/11/2015 às 17:39
  • mas já não é o mesmo resultado. A animação fica binária, o círculo começa na esquerda e logo depois pula para a direita, sem fazer a transição de forma gradual.
    – Savrige
    Commented 29/11/2015 às 17:44
  • Editei a resposta com uma possível solução. Commented 29/11/2015 às 17:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .