CSS3 realisiert den grafischen Fallanimationseffekt

<div Klasse="Box Box1"></div>
<div Klasse="Box Box2"></div>
<div Klasse="Box Box3"></div>
<div Klasse="Box Box4"></div>
<div Klasse="box box5"></div>
<div Klasse="box box6"></div>

* {
  Rand: 0;
  Polsterung: 0;
  Box-Größe: Rahmenbox;
}
Körper {
  Breite: 100 %;
  Höhe: automatisch;
  Hintergrund: #f90;
  Überlauf: versteckt;
}
.Kasten {
  Breite: 50px;
  Höhe: 50px;
  Hintergrund: #f70;
  transformieren: drehen (45 Grad);
  Position: absolut;
  Kastenschatten: 2px 2px 3px rgba (0, 0, 0, 0,3);
}
.box1 {
  links: berechnet (50 % – 25 Pixel);
  oben: berechnet (100 % – 75 Pixel);
  Animation: Box1 Kubik-Bézier(1, 0, 0,45, 1,4) 2s 1;
}
.box2 {
  links: calc(50% - 65px);
  oben: berechnet (100 % – 115 Pixel);
  Animation: Box2 Kubik-Bézier(1, 0, 0,45, 1,4) 2,5 s 1;
}
.box3 {
  links: calc(50% + 15px);
  oben: berechnet (100 % – 115 Pixel);
  Animation: Box3 Kubik-Bézier(1, 0, 0,45, 1,4) 3s 1;
}
.box4 {
  links: berechnet (50 % + 55 Pixel);
  oben: berechnet (100 % – 155 Pixel);
  Animation: Box4 Kubik-Bézier(1, 0, 0,45, 1,4) 3,5 s 1;
}
.box5 {
  links: calc(50% - 105px);
  oben: berechnet (100 % – 155 Pixel);
  Animation: Box5 Kubik-Bézier(1, 0, 0,45, 1,4) 4s 1;
}
.box6 {
  links: berechnet (50 % – 25 Pixel);
  oben: berechnet (100 % – 155 Pixel);
  Animation: Box6 Kubik-Bézier(1, 0, 0,45, 1,4) 4,5 s 1;
}
@keyframes box1 {
  aus {
    oben: -100px;
  }
  Zu {
    oben: berechnet (100 % – 75 Pixel);
  }
}
@keyframes box2 {
  aus {
    oben: -100px;
  }
  Zu {
    oben: berechnet (100 % – 115 Pixel);
  }
}
@keyframes box3 {
  aus {
    oben: -100px;
  }
  Zu {
    oben: berechnet (100 % – 115 Pixel);
  }
}
@keyframes box4 {
  aus {
    oben: -100px;
  }
  Zu {
    oben: berechnet (100 % – 155 Pixel);
  }
}
@keyframes box5 {
  aus {
    oben: -100px;
  }
  Zu {
    oben: berechnet (100 % – 155 Pixel);
  }
}
@keyframes box6 {
  aus {
    oben: -100px;
  }
  Zu {
    oben: berechnet (100 % – 155 Pixel);
  }
}