zulip/static/styles/alerts.css

.alert-display {
    display: none;

    &.show {
        display: block;
    }
}

.alert-animations {
    &.show {
        animation-name: fadeIn;
        animation-duration: 0.3s;
        animation-fill-mode: forwards;
    }

    &.fade-out {
        animation-name: fadeOut;
        animation-duration: 0.3s;
        animation-fill-mode: forwards;
    }

    .faded {
        opacity: 0.7;
    }
}

/* general alert styling changes */
.alert {
    @extend .alert-display;

    &#organization-status {
        margin: 20px;
    }

    &.stream_create_info {
        margin: 10px 10px 0 10px;
    }

    .bankruptcy_unread_count {
        font-weight: 600;
    }
}

/* animation section */
@keyframes fadeIn {
    0% {
        display: block;
        opacity: 0;
        transform: translateY(-100px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        display: none;
        opacity: 0;
        transform: translateY(-100px);
    }
}

/* @media queries */
@media (width < $lg_min) {
    .alert-box {
        width: 80%;
        left: 10%;
        margin-left: 0;
    }
}