Div’s coming and going

Question

I have the following div’s structure

<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 clicking 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 will run slowly to the left until it reaches its margin-left position: 0px; In following appears the div 2 and does the same until reaching the margin-left: 333px and analogously the div 3 until margin-left: 666px.

How to do this?

Answer 1

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 estate animation nothing more than a short form for the properties animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode and animation-play-state... then while 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;

ie, run the animation boxC, shall have a duration of 1s, where each fraction of the animation must occupy the same amount of time (linear), and after the end of the animation, the DOM element should not be reset in style (forwards).

the @keyframes sets the rules for 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 was expected at that time.

In the example above, the div.box will start with background-color: red;, during 3s (75% of 4s) it will change gradually until it stays with background-color: green;, finally, it will again change gradually by 1s (25% of 4s) until it gets background-color: blue;