@keyframes view {
    from{opacity: 0; transform: translateY(0%);} 
    to {opacity: 1; transform: translateY(10%);}
}
@keyframes disable {
    from{opacity: 1; transform: translateY(10%);} 
    to {opacity: 0; transform: translateY(0%);}
}

:root{
    --delay: 3s;
}

#popup{
    width: 300px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--bg-card);
    color: var(--color-text);
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 5px;
    padding: 30px;
    animation: 
        view 300ms linear forwards, 
        disable 300ms var(--delay) linear forwards;
}


#popup > span {
    padding: 3px 5px;
}

#popup-message-ko {
    border-left: 3px solid red;
}

#popup-message-ok {
    border-left: 3px solid green;
}