Animation CSS3 et filter:Blur()

Pedrothelion

30 Oct 2015 à 19:06

Bonjour à tous

J'ai un problème que je n'arrive pas à résoudre...

J'ai crée une animation avec 3 images (du texte sur la démo codepen). Pendant l'anim chaque image fait un mouvement circulaire continu et en même temps il y a également un effet de flou sur chacune d'elle à 50% de l'animation.

L'effet de flou fonctionne parfaitement sur Firefox, mais sur aucun autre navigateur.
Est-ce que quelqu'un aurait une idée?

la démo sur codepen ici

Merci de vos retours.
Modifié par Pedrothelion (30 Oct 2015 - 19:07)

GuillaumeBauer

31 Oct 2015 à 11:47

Hello !

Malheureusement, la propriété css filter est encore très mal prise en charge par les navigateurs.
À ce jour, seul Firefox le fait sans préfixes. Pour plus de détails, va faire un tour ici http://caniuse.com/#feat=css-filters Smiley cligne

Pedrothelion

31 Oct 2015 à 12:09

pff ouais c'est chiant Smiley cligne

J'ai testé ce code, ca fonctionne sous chrome, safari et firefox, mais pas sous ie et edge.Dans mon animation le blur ne passe que sous firefox, va comprendre. Je vais le laisser comme ça, ça fera un extra pour les utilisateurs de mozilla.

Merci de ton retour, j'avais consulté cette page également effectivement, mais cela ne reste pas très clair tout ça Smiley smile

Modifié par Pedrothelion (31 Oct 2015 - 12:11)

GuillaumeBauer

1 Nov 2015 à 18:50

En résumé, pour l'instant, ce qui marche le mieux, c'est :


p {
    -moz-filter: blur(3px);
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

Pour IE et Edge, les filtres CSS ne sont pas encore activés par défaut, mais ça ne saurait tarder Smiley langue

CSS et mise en forme, CSS3

Animation CSS3 et filter:Blur()