web-dev-qa-db-fra.com

Existe-t-il une propriété de transition animable pour les filtres CSS?

J'essaie d'animer des filtres CSS mais je ne trouve aucune information sur les bonnes propriétés de transition. Que sont-ils?

Voici un exemple: http://jsbin.com/onijim/3/

csscss-transitions
39
donleche
-webkit-transition : -webkit-filter 500ms linear

fonctionne dans webkit. Je ne connais pas le support des filtres dans FF ou Opera.

Je ne suis pas sûr de bien comprendre votre question.

55
mddw

Voilà ce que j'utilise. Pour Mozilla, le 2e fonctionne pour moi, mais dans mes sources, je l'ai trouvé avec le préfixe -moz-, donc ça ne fait pas de mal de garder les deux.

-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;
23
Karl Adler

Sur les dernières versions de Chrome qui prennent en charge transition sans -webkit- préfixe, si vous utilisez transition-property (pas de raccourci transition) et des propriétés comme filter qui ont encore besoin de -webkit- préfixe dont vous avez besoin pour mélanger le code non préfixé et préfixé:

transition-property: width, left, transform, box-shadow, filter, -webkit-filter;

Notez que la propriété filter est répétée avec -webkit-filter. Ceci est nécessaire pour les navigateurs qui n'utilisent pas de préfixe, comme Firefox, qui dans ce cas -webkit-filter est ignoré.

3
AxeEffect