.constrict-h2 {
    animation-duration: 0.5s;
    animation-name: constrict-h2;
    animation-fill-mode: forwards;
}

.expand-h2 {
    animation-duration: 0.5s;
    animation-name: expand-h2;
    animation-fill-mode: forwards;
}

.focus-animation {
    animation-name: focus-in;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
}

.pop-animation {
    animation: pop 0.1s 2;
    animation-direction: alternate;
}

.shrink-animation {
    animation: shrink 0.1s 2;
    animation-direction: alternate;
}


/*Keyframes*/

@keyframes constrict-h2 {
    from {
        max-height: 2rem;
    }
    to {
        max-height: 0
    }
}

@keyframes expand-h2 {
    from {
        max-height: 0
    }
    to {
        max-height: 5rem;
    }
}

@keyframes focus-in {
    from {
        transform: scale(1.1);
        opacity: 0;
        filter: blur(50%);
    }

    to {
        transform: scale(1);
        opacity: 1;
        filter: none;
    }
}

@keyframes pop {
    from { transform: scale(1); }
    to { transform: scale(1.04); }
}

@keyframes shrink {
    from { transform: scale(1); }
    to { transform: scale(0.96); }
}