Nav reveal css animation #css

nav-reveal.css

.active-nav nav li {
    animation: navreveal .25s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    transform: translateY(66%);
}

.active-nav nav li:nth-child(1) {
    animation-delay: .6s;
}

.active-nav nav li:nth-child(2) {
    animation-delay: .8s;
}

.active-nav nav li:nth-child(3) {
    animation-delay: 1s;
}

.active-nav nav li:nth-child(4) {
    animation-delay: 1.2s;
}

.active-nav nav li:nth-child(5) {
    animation-delay: 1.4s;
}

.active-nav nav li:nth-child(6) {
    animation-delay: 1.6s;
}

@-webkit-keyframes navreveal {
    0% {
        -webkit-transform: translateY(66%);
        transform: translateY(66%);
        opacity: 0
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes navreveal {
    0% {
        -webkit-transform: translateY(66%);
        transform: translateY(66%);
        opacity: 0
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}