Div's appearing and running

Question

Div's appearing and running

Navigation

#1 by (5 votes)

3

I have the following structure of div's

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

And the following 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;
}

I would like to make the 3 DIV's 1, 2 and 3, when loading on the page, appear from the right corner of the screen to its correct position.

Type: appears the div 1 pasted in the right corner and it runs slowly to the left until it reaches its position of margin-left: 0px; In the following it appears the div 2 and does the same until reaching margin-left: 333px and analogously to div 3 until margin-left: 666px.

How to do this?

javascript jquery css3

asked by anonymous 26.02.2016 / 12:42

1 answer

Relationship between tables calculate media from a list line by line in python

score 5 · Accepted Answer

Instead of using margin, you can use position ...

For animation, 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>

The animation property is just a short form for properties animation-name , animation-duration , animation-timing-function , animation-delay , animation-iteration-count , animation-direction , animation-fill-mode and animation-play-state . .. then when doing:

animation: boxC 1s linear forwards;

is the same as doing the following:

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

that is, execute the animation boxC , it must have a duration of 1s , where each fraction of the animation must occupy the same time slice ( linear ), and after the animation ends, the animation element DOM should not be reset in style ( forwards ).

@keyframes defines the rules for the animation, for example:

.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 is the name of the animation, 0% , 75% and 100% inform what css is expected at that time.

In the example above,% w / w will begin with div.box , for 3s (75% of 4s) it will gradually change until it has background-color: red; , it will again gradually change by 1s (25% of 4s) until you have background-color: green;