3

tenho a seguinte estrutura de div's

<div id="box">
  <div id="1">1</div>
  <div id="2">2</div>
  <div id="3">3</div>
</div>

E o seguinte css:

#box {
 width: 1000px;
 height: 300px;
}
#1, #2, #3 {
 width: 333px;
 height: 300px;
 float: left
}
#1 {
  margin-left: 0px;
}
#2 {
  margin-left: 333px;
}
#3 {
  margin-left: 666px;
}

Gostaria de fazer com que as 3 DIV's 1, 2 e 3, ao carregar na página, apareçam desde o canto direito da tela até a sua posição correta.

Tipo:aparece a div 1 colada no canto direito e ela vai correndo lentamente para a esquerda até chegar a sua posição de margin-left: 0px; Em seguindo aparece a div 2 e faz o mesmo até chegar a margin-left: 333px e analogamente a div 3 até margin-left: 666px.

Como fazer isso?

1
  • Só uma dica que não tem nada a ver com a resposta mas tente evitar o uso desenfreado de IDs e tente usar mais classes. Vai te quebrar um galhão no futuro.
    – dsantoro
    Commented 26/02/2016 às 13:36

1 Resposta 1

5

no lugar de usar margin, você pode usar position...

para a animação, use animation.

.container {
  position: relative;
  width: 100%;
  height: 170px;
  overflow: hidden;
}

.box {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 0px;
  margin: 10px;  
  left: 100%;
  
  border-radius: 5px;
  background-color: whitesmoke;
  box-shadow: 0px 0px 5px black;
}

.boxA {
  animation: boxA 1s linear 0s forwards;
  -webkit-animation: boxA 1s linear 0s forwards;  
}

.boxB {
  animation: boxB 1s linear 1s forwards;
  -webkit-animation: boxB 1s linear 1s forwards;
}

.boxC {
  animation: boxC 1s linear 2s forwards;
  -webkit-animation: boxC 1s linear 2s forwards;
}

@keyframes boxA {
  0% { 
    left: 100%;
    background-color: teal;
  }
  100% { 
    left: 0px;
    background-color: crimson;
  }
}

@keyframes boxB {
  0% { 
    left: 100%;
    background-color: steelblue;
  }
  100% { 
    left: 170px;
    background-color: teal;
  }
}

@keyframes boxC {
  0% { 
    left: 100%;
    background-color: crimson;
  }
  100% { 
    left: 340px;
    background-color: steelblue;
  }
}

@-webkit-keyframes boxA {
  0% { 
    left: 100%;
    background-color: white;
  }
  100% { 
    left: 0px;
    background-color: crimson;
  }
}

@-webkit-keyframes boxB {
  0% { 
    left: 100%;
    background-color: white;
  }
  100% { 
    left: 170px;
    background-color: teal;
  }
}

@-webkit-keyframes boxC {
  0% { 
    left: 100%;
    background-color: white;
  }
  100% { 
    left: 340px;
    background-color: steelblue;
  }
}
<div class="container">
  <div class="box boxA">A</div>
  <div class="box boxB">B</div>
  <div class="box boxC">C</div>
</div>

A propriedade animation nada mais é que uma forma curta para as propriedades animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode e animation-play-state... então ao fazer:

animation: boxC 1s linear forwards;

é o mesmo de fazer o seguinte:

animation-name: boxC;
animation-duration: 1s;
animation-timing-function: linear;
animation-fill-mode: forwards;

ou seja, execute a animação boxC, esta deve ter uma duração de 1s, onde cada fração da animação deve ocupar a mesma fatia de tempo (linear), e após o termino da animação, o elemento DOM não deve sofrer um reset no estilo (forwards).

o @keyframes define as regras para a animação, por exemplo:

.box {
  width: 300px;
  height: 300px;
  animation: background 4s linear forwards;
  -webkit-animation: background 4s linear forwards;
} 

@-webkit-keyframes background {
  0% { background-color: red; }
  75% { background-color: green; }
  100% { background-color: blue; }
}

@keyframes background {
  0% { background-color: red; }
  75% { background-color: green; }
  100% { background-color: blue; }
}
<div class="box">
</div>

background é o nome da animação, 0%, 75% e 100% informam qual o css esperado naquele momento.

No exemplo acima, a div.box vai iniciar com background-color: red;, durante 3s (75% de 4s) ela irá mudar gradativamente até ficar com background-color: green;, por fim, ela irá novamente mudar gradativamente por 1s (25% de 4s) até ficar com background-color: blue;

6
  • Bacana, que recursos são @keyframes, não conhecia eles ! Commented 26/02/2016 às 16:39
  • @leandro17br, realizei uma atualização na resposta. Commented 26/02/2016 às 17:15
  • Obrigado, vou me aprofundar sobre isto. Commented 26/02/2016 às 17:18
  • Rapaz, vou estudar esse lance mastigadinho.CSS3 gasta menos memória que jquery. Obrigado! Commented 27/02/2016 às 0:42
  • Mas como seria para além de as div's aparecerem correndo, elas ainda virem mudando de cor? animation: background 4s linear forwards; -webkit-animation: background 4s linear forwards; Commented 27/02/2016 às 15:03

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 .