.delighter.right {
    transform: translate(-100%);
    opacity: 0;
    transition: all .75s ease-out;
}
.delighter.right.started {
    transform: none;
    opacity: 1;
}
.delighter.left {
    transform: translate(100%);
    opacity: 0;
    transition: all .75s ease-out;
}

.delighter.left.started {
    transform: none;
    opacity: 1;
}
.delighter.bottom {
    transform: translatey(150%);
    opacity: 0;
    transition: all .75s ease-out;
}
.delighter.bottom.started {
    transform: none;
    opacity: 1;
}
.delighter li {
    opacity: 0;
    transform: translatey(400%);
    transition: all .7s ease-out;
}
.delighter.started li {
    opacity: 1;
    transform: none;
}