Sto tentando di animare i filtri CSS ma non riesco a trovare alcuna informazione sulle proprietà di transizione corrette. Quali sono?Esiste una proprietà di transizione animabile per i filtri CSS?
Ecco un esempio: http://jsbin.com/onijim/3/
-webkit-transition : -webkit-filter 500ms linear
opere in WebKit. Non so sul supporto dei filtri in FF o Opera.
Non sono sicuro di comprendere appieno la tua domanda.
Hai capito bene. Apparentemente la proprietà di transizione funziona solo con prefissi come da questa scrittura, grazie. – donleche
Se eseguo la transizione -webkit-filter, si anima bene, ma dopo l'animazione il DIV appare vuoto. Sto solo applicando una sfocatura di 5px al div. –
Apparentemente sto ottenendo un problema di rendering perché si interrompe solo quando il div che contiene il div di sfocatura ha un set di posizioni a sinistra che è passato, ma quando la sinistra è 0px il div di sfocatura non scompare più (o se lo sfocato, quindi cambio la posizione sinistra del contenitore che mostra ancora). Vorrei che avrebbero risolto questi nodi! –
Questo è quello che sto usando. Per Mozilla il 2 funziona per me, ma nelle mie fonti l'ho trovato con il prefisso -moz-, quindi non fa male a mantenere entrambi.
-webkit-transition: 1s -webkit-filter linear;
-moz-transition: 1s -moz-filter linear;
-moz-transition: 1s filter linear;
-ms-transition: 1s -ms-filter linear;
-o-transition: 1s -o-filter linear;
transition: 1s filter linear, 1s -webkit-filter linear;
Come @AxeEffect menzionato nel suo commento, per il più recente supporto di Chrome, dovresti aggiungere la proprietà '-webkit-filter' alla' transizione' non prefissa, come 'transition: 1s filter linear, 1s -webkit-filter linear;' –
Su ultime versioni di Chrome che supportano transition senza -webkit- prefisso, se si utilizza transition-property (senza stenografia transition) e immobili come filter che ha ancora bisogno di -webkit- prefisso dovete mescolare senza prefisso e prefisso codice:
transition-property: width, left, transform, box-shadow, filter, -webkit-filter;
Si noti che la proprietà filter è stata reimpostato con -webkit-filter. Questo è necessario per i browser che non usano prefissi, come Firefox, che in tal caso -webkit-filter viene ignorato.
Dovrebbe essere lo stesso nome di proprietà, no? Assicurati di abbinare correttamente anche i prefissi. – BoltClock