Dissolvenza funziona in uscita ma non in entrata

[KillerWorm]

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

Ciao, la dissolvenza in entrata non avviene per via del CSS applicato per lo stato normale di quell'elemento.

Non c'è infatti alcuna proprietà che indichi di nasconderlo inizialmente; perciò, nel momento in cui viene creato, questo appare già con opacity:1 (valore di default).

La dissolvenza quindi non ha luogo perché andrebbe dal valore 1 allo stesso valore 1.

Ovviamente mettere opacity:0 per lo stato normale, non risolverebbe se non viene riportato in qualche modo al valore 1.

Questo potresti farlo in vari modi usando un minimo di JavaScript. Ad esempio potresti definire una classe CSS per lo stato "nascosto" degli elementi, quindi applicarla inizialmente e rimuoverla attraverso un setTimeout, per poi riapplicarla magari al click del pulsante "chiudi" (anziché usare un checkbox).

Qui il tuo esempio rielaborato:

<div class='message-container nascosto'>
<?php if ($result) { ?>  <div class='success-message'>Messaggio inviato con successo!</div>
<?php } else { ?>  <div class='error-message'>Si è verificato un errore durante l'invio del messaggio. Riprova più tardi.</div>
<?php } ?>  <button class='close-button'>Chiudi</button>
</div>
<div class='sfondo-message-container'></div>
<script>
  (() => {
    const btnChiudi = document.querySelector('.close-button');
    const msg = document.querySelector('.message-container');
    setTimeout(() => {
      msg.classList.remove('nascosto');
    }, 1);
    btnChiudi.addEventListener('click', e => {
      msg.classList.add('nascosto');
    });
  })();
</script>

e relativo CSS:

.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;
}
.sfondo-message-container {
  width: 100%;
  height: 100%;
  z-index: 998;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
}
.success-message {
  color: green;
  font-size: 18px;
  text-align: center;
}
.error-message {
  color: red;
  font-size: 18px;
  text-align: center;
}
.close-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}
.message-container,
.sfondo-message-container {
  transition: opacity 0.5s ease-in-out;
}
.message-container.nascosto,
.message-container.nascosto + .sfondo-message-container {
  pointer-events: none;
  opacity: 0;
}

volendo gestire tutto via CSS, senza JS

Forse mi sbaglio ma percepisco un tuo timore (che in questo caso ritengo infondato) nell'usare JavaScript. In casi del genere penso sia la scelta più logica e semplice per ottenere ciò che ti serve, a meno che non ci sia qualche particolare ragione per cui pensi sia meglio evitarlo

Ad ogni modo, per i puristi CSS si potrebbe risolvere facendo ricorso ad animation che, rispetto a transition, permette di definire le proprietà attraverso una timeline, così che sia possibile applicare una dissolvenza anche in apertura, cioè nel momento in cui gli elementi sono creati.

Qui il solo CSS rielaborato, che potresti applicare al tuo esempio:

.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;
}
.sfondo-message-container {
  width: 100%;
  height: 100%;
  z-index: 998;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
}
.success-message {
  color: green;
  font-size: 18px;
  text-align: center;
}
.error-message {
  color: red;
  font-size: 18px;
  text-align: center;
}
.close-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}
.hidden-checkbox {
  display: none;
}
.message-container,
.sfondo-message-container {
  animation: fade-in 0.5s ease-in-out;
}
.hidden-checkbox:checked ~ .sfondo-message-container,
.hidden-checkbox:checked ~ .message-container {
  pointer-events: none;
  animation: fade-out 0.5s ease-in-out forwards;
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
@keyframes fade-out {
  to {
    opacity: 0;
  }
}

Senza entrare nei dettagli, ho definito e applicato le due animazioni per la dissolvenza in entrata e in uscita.
Quella in entrata verrà chiaramente eseguita nel momento che gli elementi vengono creati nella pagina, mentre quella in uscita è eseguita attraverso il tuo checkbox.

Ritengo comunque che una soluzione JavaScript sia più adatta e facile da gestire in casi del genere, piuttosto che fossilizzarsi su "stratagemmi" CSS che a lungo andare possono risultare limitanti e inadeguati.

Vedi tu cosa usare.