.delighter.splash {
  transition: all 2s ease-out;
}
.delighter.splash.ended {
  background: #fff;
}
/* 从中心有小变大 */
.delighter.colormove {
  transform: scale(0);
  opacity: 0;
  transition: all 0.35s ease-out;
}
.delighter.colormove.started {
  transform: scale(1);
  opacity: 1;
}
/* 从左边进来 */
.delighter.right {
  transform: translate(-100%);
  opacity: 0;
  transition: all 0.75s ease-out;
}
.delighter.right.started {
  transform: none;
  opacity: 1;
}
/* 从右边进来 */
.delighter.left {
  transform: translate(100%);
  opacity: 0;
  transition: all 0.75s ease-out;
}
.delighter.left.started {
  transform: none;
  opacity: 1;
}
/* 从底部进来 */
.delighter.bottom {
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.25s ease-out;
}
.delighter.bottom.started {
  transform: none;
  opacity: 1;
}
/* 列表逐个进入 */
.delighter .everyli {
  opacity: 0;
  transform: translatey(400%);
  transition: all 0.7s ease-out;
}
.delighter.started .everyli {
  opacity: 1;
  transform: none;
}
.delighter.started .everyli:nth-child(1) {
  transition: all 0.7s ease-out 0.1s;
}
.delighter.started .everyli:nth-child(2) {
  transition: all 0.7s ease-out 0.3s;
}
.delighter.started .everyli:nth-child(3) {
  transition: all 0.7s ease-out 0.5s;
}
.delighter.started .everyli:nth-child(4) {
  transition: all 0.7s ease-out 0.7s;
}
.delighter.started .everyli:nth-child(5) {
  transition: all 0.7s ease-out 0.9s;
}
.delighter.started .everyli:nth-child(6) {
  transition: all 0.7s ease-out 1.1s;
}
.delighter.started .everyli:nth-child(7) {
  transition: all 0.7s ease-out 1.3s;
}
/*  */
.delighter pre {
  display: block;
  transition: all 2s ease-out;
  opacity: 0;
  padding: 20px 0;
  width: 1px;
  overflow: hidden;
}
.delighter.started pre {
  max-width: 99999px;
  width: 100%;
  opacity: 1;
}
.delighter .box {
  transition: all 1s ease-out;
}
.delighter .box:nth-child(1) {
  transform: translate(-100%, 0);
}
.delighter .box:nth-child(2) {
  transform: translate(170%, -70%);
}
.delighter .box:nth-child(3) {
  transform: translate(20%, 0%);
}

.delighter.started .box:nth-child(1) {
  transform: translate(0, 0);
}
.delighter.started .box:nth-child(2) {
  transform: translate(70%, -70%);
}
.delighter.started .box:nth-child(3) {
  transform: translate(20%, -120%);
}
body,
html {
  overflow-x: hidden;
}