Animazioni con backdrop-filter

[techno]

Ciao a tutti
Stoc ercando di fare un animazione con backdrop-filter

<span>CIAO</span>

Codice CSS:

span {
background-color: var(--clr-default);
color: #ffffff;
font-size: 1em;
font-weight: 500;
padding: 5px;
border-radius: 3px;
animation: onair 3s infinite linear;
}

@keyframes onair {
    0% {
        backdrop-filter: opacity(100%);
    }
    50% {
        backdrop-filter: opacity(60%);
    }
    100% {
        backdrop-filter: opacity(100%);
    }
}

Ma non capisco perche non funzioni

[alka]

Stoc ercando di fare un animazione con backdrop-filter
[...]
Ma non capisco perche non funzioni

Non tutte le proprietà supportano l'animazione.

[KillerWorm]

Ciao, in realtà sta funzionando per quello che gli hai detto di fare. Senza offesa ma suppongo che tu non stia capendo come funziona il backdrop-filter.

Il fatto è che non ne vedi gli effetti perché il backdrop-filter non fa altro che riprodurre, sotto forma di immagine come sfondo dell'elemento a cui lo applichi, l'area che è visibile al disotto dello stesso, in modo elaborato secondo i filtri specificati. Ciò che gli sta sotto resta comunque inalterato, in quanto questi filtri sono applicati solo sull'immagine di sfondo dell'elemento in questione, non sugli elementi che gli stanno sotto.

Ora, lo sfondo riprodotto è una copia esatta dell'area che sta sotto tale elemento, tu gli stai applicando solo una trasparenza ma, dal momento che l'area sotto resta presente e visibile, non si noterà alcuna differenza anche quando l'immagine backdrop è traslucente, perché appunto si vedrà ciò che gli sta sotto (esattamente la stessa grafica).

Per capire cosa ti si possa consigliare per risolvere, dovresti spiegare meglio quale effetto ti aspetti di vedere/ottenere. Puoi chiarire?