Ciao a tutti, avrei bisogno di supporto per risolvere una problematica CSS.

Nel mio sito ho un form di contatto.
A seguito dell'invio del modulo, apparirà un messaggio di conferma o di errore.

Tutto questo viene gestito via php con l'inserimento di un codice html all'interno:

codice:
if ($result) {    echo "<input type='checkbox' id='success-checkbox' class='hidden-checkbox'>
          <div class='message-container'>
            <div class='success-message'>Messaggio inviato con successo!</div>
            <label for='success-checkbox' class='close-button'>Chiudi</label>
          </div>
          <div class='sfondo-message-container'></div>";
} else {
    echo "<input type='checkbox' id='error-checkbox' class='hidden-checkbox'>
          <div class='message-container'>
            <div class='error-message'>Si è verificato un errore durante l'invio del messaggio. Riprova più tardi.</div>
            <label for='error-checkbox' class='close-button'>Chiudi</label>
          </div>
          <div class='sfondo-message-container'></div>";
}
Ora, gli elementi ".message-container" e ".sfondo-messange-container" vorrei che apparissero e sparissero in dissolvenza.

Per farli sparire, volendo gestire tutto via CSS, senza JS, ho utilizzato l'espediente di un "Checkbox", come potete vedere dal codice CSS:

codice:
/* Stili per il contenitore del messaggio */.message-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 300px;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: opacity 0.5s ease-in-out;


}




.sfondo-message-container {
    width: 100%;
    height: 100%;
    z-index: 998;
    background-color: rgba(0, 0, 0, 0.5); 
    position: absolute;
    transition: opacity 0.5s ease-in-out;


}




/* Stili per il messaggio di successo */
.success-message {
    color: green;
    font-size: 18px;
    text-align: center;
}


/* Stili per il messaggio di errore */
.error-message {
    color: red;
    font-size: 18px;
    text-align: center;
}


/* Stili per il pulsante Chiudi */
.close-button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 10px;
}




.hidden-checkbox {
    display: none;
}


.hidden-checkbox:checked ~ .sfondo-message-container {
    opacity: 0;
    pointer-events: none;
}


/* Mostra il messaggio di successo o di errore quando l'input checkbox è selezionato */
.hidden-checkbox:checked ~ .message-container {
    opacity: 0;
    pointer-events: none;
}
Funziona correttamente ma c'è un problema.

Io ho impostato la dissolvenza in entrata e in uscita.

In uscita (cioè all'attivazione del Checkbox che fa chiudere gli elementi) la dissolvenza funziona correttamente.

In entrata tuttavia, la dissolvenza non funziona, in quanto gli elementi appaiono tutti in una volta.

Potete aiutarmi a risolvere questo aspetto?

Grazie!