.scaled-appearance {
    animation: scaled-appearance;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}
@keyframes scaled-appearance {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.scaled-disappearance {
    animation: scaled-disappearance;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}
@keyframes scaled-disappearance {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0);
    }
}

.appearance {
    animation: appearance;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}
@keyframes appearance {
    to {
        opacity: 1;
    }
}

.disappearance {
    animation: disappearance;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}
@keyframes disappearance {
    to {
        opacity: 0;
    }
}