.to-right {
    transform: translateX(-30px);
    opacity: 0;
    transition: transform .5s, opacity .5s;
}
.to-left {
    transform: translateX(30px);
    opacity: 0;
    transition: transform .5s, opacity .5s;
}
.to-bottom {
    transform: translateY(-30px);
    opacity: 0;
    transition: transform .5s, opacity .5s;
}
.to-top {
    transform: translateY(30px);
    opacity: 0;
    transition: transform .5s, opacity .5s;
}

.animate {
    transform: translateX(0) translateY(0);
    opacity: 1;
}

.to-right--child > *{
    transform: translateX(-30px);
    opacity: 0;
    transition: transform .5s, opacity .5s;
}

.to-left--child > *{
    transform: translateX(30px);
    opacity: 0;
    transition: transform .5s, opacity .5s;
}
.to-bottom--child > *{
    transform: translateY(-30px);
    opacity: 0;
    transition: transform .5s, opacity .5s;
}
.to-top--child > * {
    transform: translateY(30px);
    opacity: 0;
    transition: transform .5s, opacity .5s;
}
.to-right--child > *:nth-child(2) {transition-delay: .1s}
.to-right--child > *:nth-child(3) {transition-delay: .2s}
.to-right--child > *:nth-child(4) {transition-delay: .3s}
.to-right--child > *:nth-child(5) {transition-delay: .4s}
.to-right--child > *:nth-child(6) {transition-delay: .5s}
.to-right--child > *:nth-child(7) {transition-delay: .6s}
.to-right--child > *:nth-child(8) {transition-delay: .7s}
.to-right--child > *:nth-child(9) {transition-delay: .8s}
.to-right--child > *:nth-child(10) {transition-delay: .9s}

.to-left--child > *:nth-child(2) {transition-delay: .1s}
.to-left--child > *:nth-child(3) {transition-delay: .2s}
.to-left--child > *:nth-child(4) {transition-delay: .3s}
.to-left--child > *:nth-child(5) {transition-delay: .4s}
.to-left--child > *:nth-child(6) {transition-delay: .5s}
.to-left--child > *:nth-child(7) {transition-delay: .6s}
.to-left--child > *:nth-child(8) {transition-delay: .7s}
.to-left--child > *:nth-child(9) {transition-delay: .8s}
.to-left--child > *:nth-child(10) {transition-delay: .9s}

.to-bottom--child > *:nth-child(2) {transition-delay: .1s}
.to-bottom--child > *:nth-child(3) {transition-delay: .2s}
.to-bottom--child > *:nth-child(4) {transition-delay: .3s}
.to-bottom--child > *:nth-child(5) {transition-delay: .4s}
.to-bottom--child > *:nth-child(6) {transition-delay: .5s}
.to-bottom--child > *:nth-child(7) {transition-delay: .6s}
.to-bottom--child > *:nth-child(8) {transition-delay: .7s}
.to-bottom--child > *:nth-child(9) {transition-delay: .8s}
.to-bottom--child > *:nth-child(10) {transition-delay: .9s}

.to-top--child > *:nth-child(2) {transition-delay: .1s}
.to-top--child > *:nth-child(3) {transition-delay: .2s}
.to-top--child > *:nth-child(4) {transition-delay: .3s}
.to-top--child > *:nth-child(5) {transition-delay: .4s}
.to-top--child > *:nth-child(6) {transition-delay: .5s}
.to-top--child > *:nth-child(7) {transition-delay: .6s}
.to-top--child > *:nth-child(8) {transition-delay: .7s}
.to-top--child > *:nth-child(9) {transition-delay: .8s}
.to-top--child > *:nth-child(10) {transition-delay: .9s}

.animate > * {
    transform: translateX(0);
    opacity: 1;
}