<div class="sinir">
  <div class="box" id="box1">Z</div>
  <div class="box" id="box2">O</div>
  <div class="box" id="box3">R</div>
  <div class="box" id="box4">N</div>
  <div class="box" id="box5">E</div>
  <div class="box" id="box6">T</div>
</div>

body{background-color:#5d216c;width:700px;margin:100px auto;}
.box {
  width:auto;
  height:100px;
  background-color:#6a2e79;
  margin:0 auto;
  float:left;
  font-size:100px;
  padding:20px;
  color:#fff;
}

@-webkit-keyframes aniload {
  from {-webkit-transform:translate(0px, 1000px)}
  to   {-webkit-transform:translate(0px, 0px)}
}

@-moz-keyframes aniload {
  from {-moz-transform:translate(0px, 1000px)}
  to   {-moz-transform:translate(0px, 0px)}
}

@-ms-keyframes aniload {
  from {-ms-transform:translate(0px, 1000px)}
  to   {-ms-transform:translate(0px, 0px)}
}

@-o-keyframes aniload {
  from {-o-transform:translate(0px, 1000px)}
  to   {-o-transform:translate(0px, 0px)}
}

@keyframes aniload {
  from {transform:translate(0px, 1000px)}
  to   {transform:translate(0px, 0px)}
}

#box1 {
  -webkit-animation:aniload 1s;
  -moz-animation:aniload 1s;
  -ms-animation:aniload 1s;
  -o-animation:aniload 1s;
  animation:aniload 1s;
}

#box2 {
  -webkit-animation:aniload 2s;
  -moz-animation:aniload 2s;
  -ms-animation:aniload 2s;
  -o-animation:aniload 2s;
  animation:aniload 2s;
}

#box3 {
  -webkit-animation:aniload 3s;
  -moz-animation:aniload 3s;
  -ms-animation:aniload 3s;
  -o-animation:aniload 3s;
  animation:aniload 3s;
}

#box4 {
  -webkit-animation:aniload 4s;
  -moz-animation:aniload 4s;
  -ms-animation:aniload 4s;
  -o-animation:aniload 4s;
  animation:aniload 4s;
}

#box5 {
  -webkit-animation:aniload 5s;
  -moz-animation:aniload 5s;
  -ms-animation:aniload 5s;
  -o-animation:aniload 5s;
  animation:aniload 5s;
}
#box6 {
  -webkit-animation:aniload 6s;
  -moz-animation:aniload 6s;
  -ms-animation:aniload 6s;
  -o-animation:aniload 6s;
  animation:aniload 6s;
}