CSS 3 filtres (flou) n'utilisant pas de durée de la transition

J'ai trouvé cette technique soignée pour la croix-navigateur flou. Mais il ne ressemble pas à la transition avait un effet, donc je fourchue et régler le temps de transition et de la quantité de flou, et bien sûr il se passe instantanément.

img.blur {
-webkit-filter: blur(30px); -moz-filter: blur(30px);
-o-filter: blur(30px); -ms-filter: blur(30px); 
filter: url(#blur); filter: blur(30px);  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
-webkit-transition: 2s -webkit-filter linear;
-moz-transition: 2s -moz-filter linear;
-o-transition: 2s -o-filter linear;
transition: 2s filter linear;
}

http://codepen.io/CSobol/pen/LGCiw

Ne transition: filter fonctionne pas avec le flou pour une raison quelconque?

ressemble à cet exemple fonctionne maintenant 🙂

OriginalL'auteur Chris Sobolewski | 2014-05-08

  1. 30

    De Transition a été unprefixed, mais le filtre n'a pas, afin que la transition est plus de l'équitation, le webkit-transition, mais alors ne savez pas quoi faire avec le unprefixed filtre. Cette modification fonctionne:

    transition: 2s -webkit-filtre linéaire;

    Votre suggestion a correctement identifié le problème. Cependant, si je ajouter que, la transition ne fonctionne que dans les navigateurs webkit, laissant FF, Opera, Safari, IE et sans animation.
    Ajouter plus de transitions pour chaque pré-fixe le filtre... ou de se débarrasser de la unprefixed transition entièrement.
    Votre première option n'a pas fonctionné. Votre deuxième semble comme il se doit. Merci...
    Yep. A travaillé comme un charme! Merci une tonne pour la deuxième paire d'yeux. J'ai remarqué que c'est ce qu'il fait après que vous avez mentionné. Belle chose à garder les yeux ouverts pour dans l'avenir.
    L'utilisation de la cascade et de mettre transition: 2s filter linear; au sommet de la liste de transitions.

    OriginalL'auteur

  2. 16

    Vouliez-vous dire comme ça?

    transition: 1s filter linear;
-webkit-transition: 1s -webkit-filter linear;
-moz-transition: 1s -moz-filter linear;
-ms-transition: 1s -ms-filter linear;
-o-transition: 1s -o-filter linear;

    OriginalL'auteur