Errore nell'utilizzo della keyword transition

[NoNameoN]

Salve, sto avendo un probema con l'effetto di transazione in uscita, con CSS, usando la keyword transition.
Tramite javascript cambio la classe "intro" in "intro.display-none" dove all'interno c'è il seguente codice:

{
  position: fixed;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: white;
  z-index: -10;
  color: #CC0000;
  text-align: center;
  line-height: 90vh;

  transition: all 1s; }

Non riesco a capire perché, nonostante abbia usato transition all 1s, quando viene oscurato si oscura instantaneamente.

Ho provato anche a usare transition-delay e transition-duration ma ovviamente non cambia nulla.

[KillerWorm]

Ciao, prova ad applicare il transition alla classe "intro".

In parole semplici, la transizione viene eseguita a partire dalla situazione in cui questa è definita. Se la situazione di partenza vede opacity:0, questa proprietà è applicata istantaneamente, così come è applicata la "definizione" della transizione. Perché questa transizione avvenga, dovrà in seguito mutare qualche valore, ad esempio opacity:1.

In pratica, nel tuo caso la definizione della transizione devi applicarla nella classe dove hai opacity:1, in modo che, cambiando classe dove viene trovato opacity:0, la transizione sia eseguita dal valore 1 al valore 0.

Fai sapere.

[NoNameoN]

Ciao, prova ad applicare il transition alla classe "intro".

In parole semplici, la transizione viene eseguita a partire dalla situazione in cui questa è definita. Se la situazione di partenza vede opacity:0, questa proprietà è applicata istantaneamente, così come è applicata la "definizione" della transizione. Perché questa transizione avvenga, dovrà in seguito mutare qualche valore, ad esempio opacity:1.

In pratica, nel tuo caso la definizione della transizione devi applicarla nella classe dove hai opacity:1, in modo che, cambiando classe dove viene trovato opacity:0, la transizione sia eseguita dal valore 1 al valore 0.

Fai sapere.

Ho risolto ponendo tutte le caratteristiche su splash e quindi anche su splash.display-none.
Poi ho messo la scomparsa su splash e non più su intro e nel file css ho aggiunto

.intro{
line-height: 90vh;
}