CSS3はグラフィックの落下アニメーション効果を実現します

<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<div class="box box4"></div>
<div class="box box5"></div>
<div class="box box6"></div>

* {
  マージン: 0;
  パディング: 0;
  ボックスのサイズ: 境界線ボックス;
}
体 {
  幅: 100%;
  高さ: 自動;
  背景: #f90;
  オーバーフロー: 非表示;
}
。箱 {
  幅: 50px;
  高さ: 50px;
  背景: #f70;
  変換: 回転(45度);
  位置: 絶対;
  ボックスの影: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
.box1 {
  左: calc(50% - 25px);
  上: calc(100% - 75px);
  アニメーション: box1 cubic-bezier(1, 0, 0.45, 1.4) 2s 1;
}
.box2 {
  左: calc(50% - 65px);
  上: calc(100% - 115px);
  アニメーション: box2 cubic-bezier(1, 0, 0.45, 1.4) 2.5s 1;
}
.box3 {
  左: calc(50% + 15px);
  上: calc(100% - 115px);
  アニメーション: box3 cubic-bezier(1, 0, 0.45, 1.4) 3s 1;
}
.box4 {
  左: calc(50% + 55px);
  上: calc(100% - 155px);
  アニメーション: box4 cubic-bezier(1, 0, 0.45, 1.4) 3.5s 1;
}
.box5 {
  左: calc(50% - 105px);
  上: calc(100% - 155px);
  アニメーション: box5 cubic-bezier(1, 0, 0.45, 1.4) 4s 1;
}
.box6 {
  左: calc(50% - 25px);
  上: calc(100% - 155px);
  アニメーション: box6 cubic-bezier(1, 0, 0.45, 1.4) 4.5s 1;
}
@キーフレームボックス1 {
  から {
    上: -100px;
  }
  に {
    上: calc(100% - 75px);
  }
}
@keyframes ボックス2 {
  から {
    上: -100px;
  }
  に {
    上: calc(100% - 115px);
  }
}
@キーフレームボックス3 {
  から {
    上: -100px;
  }
  に {
    上: calc(100% - 115px);
  }
}
@キーフレームボックス4 {
  から {
    上: -100px;
  }
  に {
    上: calc(100% - 155px);
  }
}
@keyframes ボックス5 {
  から {
    上: -100px;
  }
  に {
    上: calc(100% - 155px);
  }
}
@キーフレームボックス6 {
  から {
    上: -100px;
  }
  に {
    上: calc(100% - 155px);
  }
}