CSS: implementare le animazioni slide up e slide down

CSS: implementare le animazioni slide up e slide down

Implementare le animazioni slide up e slide down è semplice con i CSS.

Partiamo da questa marcatura:


<div class="slide"></div>

Il codice CSS è il seguente:


.slide {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.slide-down {
    animation: slideDown 800ms ease-in both;
}

.slide-up {
    animation: slideUp 800ms ease-in both;
}

@keyframes slideDown {
    0% {
        opacity: 0;
        max-height: 0;
    }

    100% {
        opacity: 1;
        max-height: 800px;
    }
}

@keyframes slideUp {
    0% {
        opacity: 1;
        max-height: 800px;
    }

    100% {
        opacity: 0;
        max-height: 0;
    }
}

Torna su