#anibox0, #anibox1, #anibox2, #anibox3 { width:100px; height:100px; margin:20px 0; }
#anibox4 { background-color:#ffff00; width:40px; height:40px; margin:0; padding:0; border-radius:60px; }
#anibox5 { background-color:#fff; width:70px; height:20px; margin:0; padding:0; border-radius:8px; }
#anibox6 { background-color:#fff; width:50px; height:15px; margin:0; padding:0; border-radius:6px; }

#anibox0, #anibox1, #anibox2, #anibox3, #anibox4, #anibox5, #anibox6{ position:relative; animation-duration:3s; animation-fill-mode:forwards; }

/** LEFT/RIGHT: X STARTING POSITIONS **/
#sec_7 .anibox0, #sec_7 .anibox2 { left:-120px; animation-name:aniBox1; }
#sec_7 .anibox1, #sec_7 .anibox3 { right:-320px; animation-name:aniBox2; }
#sec_7 #anibox4 { top:-360px; right:-70px; opacity:0; }
#sec_7 #anibox5 { top:-380px; right:-180px; opacity:0; }
#sec_7 #anibox6 { top:-310px; right:-70px; opacity:0; }

#sec_7 .anibox0-0 { animation-name:aniBox3; }
#sec_7 .anibox1-1 { animation-name:aniBox4; }
#sec_7 .anibox2-2 { animation-name:aniBox5; }
#sec_7 .anibox3-3 { animation-name:aniBox6; }

#sec_7 .anibox-end-0 { animation-name:aniBoxEnd0; }
#sec_7 .anibox-end-1 { animation-name:aniBoxEnd1; }
#sec_7 .anibox-end-2 { animation-name:aniBoxEnd2; }
#sec_7 .anibox-end-3 { animation-name:aniBoxEnd3; }
#sec_7 .anibox-end-4 { animation-name:aniBoxEnd4; }
#sec_7 .anibox-end-5 { animation-name:aniBoxEnd5; }
#sec_7 .anibox-end-6 { animation-name:aniBoxEnd6; }

#sec_7 .anibox0 { background-color:#e1bb80; }
#sec_7 .anibox1 { background-color:#84dcc6; }
#sec_7 .anibox2 { background-color:#4b4e6d; }
#sec_7 .anibox3 { background-color:#222; }

@keyframes aniBox1 {
    0% { transform:translateX(-120px) rotate(360deg); }
    25% { transform:translateX(320px); }
    50% { transform:translateX(320px) translateY(120px); }
    75% { transform:translateX(320px) translateY(120px) skew(30deg); }
    100% { transform:translateX(120px) translateY(120px) skew(0); }
}

@keyframes aniBox2 {
    0% { transform:translateX(0) rotate(360deg); }
    25% { transform:translateX(-320px); }
    50% { transform:translateX(-320px) translateY(-120px); }
    75% { transform:translateX(-320px) translateY(-120px) skew(-30deg); }
    100% { transform:translateX(-120px) translateY(-120px) skew(0deg); }
}

@keyframes aniBox3 {
    0% { transform:translateX(120px) translateY(120px); }
    25% { transform:translateX(120px) translateY(50px); }
    50% { transform:translateX(320px) translateY(290px); }
    100% { transform:translateX(275px) translateY(210px); }
}

@keyframes aniBox4 {
    0% { transform:translateX(-120px) translateY(-120px); }
    25% { transform:translateX(-120px) translateY(-70px); }
    50% { transform:translateX(-320px) translateY(170px); }
    100% { transform:translateX(-275px) translateY(90px); }
}

@keyframes aniBox5 {
    0% { transform:translateX(120px) translateY(120px); }
    25% { transform:translateX(120px) translateY(50px); }
    50% { transform:translateX(320px) translateY(-190px); }
    100% { transform:translateX(275px) translateY(-140px); }
}

@keyframes aniBox6 {
    0% { transform:translateX(-120px) translateY(-120px); }
    25% { transform:translateX(-120px) translateY(-70px); }
    50% { transform:translateX(-320px) translateY(-310px); }
    100% { transform:translateX(-275px) translateY(-260px); }
}

@keyframes aniBoxEnd0 {
    0% { transform:translateX(275px) translateY(210px); }
    50% { transform:translateX(275px) translateY(210px); background-color:#0000ff; }
    100% { transform:translateX(275px) translateY(210px); opacity:0; }
}

@keyframes aniBoxEnd1 {
    0% { transform:translateX(-275px) translateY(90px); }
    50% { transform:translateX(-275px) translateY(90px); background-color:#0000ff; }
    100% { transform:translateX(-275px) translateY(90px); opacity:0; }
}

@keyframes aniBoxEnd2 {
    0% { transform:translateX(275px) translateY(-140px); }
    50% { transform:translateX(275px) translateY(-140px); background-color:#0000ff; }
    100% { transform:translateX(275px) translateY(-140px); opacity:0;  }
}

@keyframes aniBoxEnd3 {
    0% { transform:translateX(-275px) translateY(-260px); }
    50% { transform:translateX(-275px) translateY(-260px); background-color:#0000ff; }
    100% { transform:translateX(-275px) translateY(-260px); opacity:0; }
}

@keyframes aniBoxEnd4 {
    0% { opacity:0; }
    50% { opacity:1; }
    100% { opacity:0; }
}

@keyframes aniBoxEnd5 {
    0% { opacity:0; }
    50% { opacity:0.9; }
    100% { opacity:0; }
}

@keyframes aniBoxEnd6 {
    0% { opacity:0; }
    50% { opacity:0.65; }
    100% { opacity:0; }
}