Transition : background-image ne fonctionne pas sous firefox et IE

Bonjour

j'ai fais une transition sur un id
transition: background-image 1s linear 1s;
qui ne fonctionne pas sous firefox45 et IE10.

J'ai pourtant rajouté
-ms-
-moz-
et cela ne fonctionne toujours pas.

Ca fonctionne uniquement sur Safari et Chrome. Et sur firefox et IE l'image background change mais sans la transition.

Page ici: http://www.renna.fr/articles/actualite-2015-metiss-geco-attentat-anto.html

#metissvsgecobw {
	-webkit-transition: background-image 1s linear 1s;
	-o-transition: background-image 1s linear 1s;
	-moz-transition: background-image 1s linear 1s;
	-ms-transition: background-image 1s linear 1s;
	transition: background-image 1s linear 1s;
}
#metissvsgecobw:hover {
	background-image: url(../boutons/metiss_vs_geco_color.jpg);
}

Modifié par RenNa (17 Mar 2016 - 00:48)

Bonjour,

Tout simplement que l'animation sur un background-image n'est que à l'état de projet dans le standard W3C, et une fois n'est pas coutume, les webkit browsers ont pris un peu d'avance.

Tu dois pouvoir un peu tricher en utilisant les pseudo ::after (ou ::before)...
Modifié par SolidSnake (17 Mar 2016 - 08:49)

Bonjour !

Le truc est à peu près le même que pour les slideshows...

https://css-tricks.com/creating-a-css-sliding-background-effect/

SolidSnake a écrit :
Bonjour,

Tout simplement que l'animation sur un background-image n'est que à l'état de projet dans le standard W3C, et une fois n'est pas coutume, les webkit browsers ont pris un peu d'avance.

Tu dois pouvoir un peu tricher en utilisant les pseudo ::after (ou ::before)...

Salut

C'est l'effet que je cherche. Avec ::after ::before je ne vois pas comment faire l'effet de transition du background. Passer d'un background à un autre ça c'est ok.

Merci.

Zelena a écrit :
Bonjour !

Le truc est à peu près le même que pour les slideshows...

https://css-tricks.com/creating-a-css-sliding-background-effect/

Salut,

Là aussi je ne vois pas comment faire pour avoir l'effet de transition.

Merci.

Bonjour,

Un truc du genre : http://codepen.io/anon/pen/bpgmGO
Par contre je pensais pouvoir utiliser les data-* avec attr(), mais ce n'est pas encore implémenté par les navigateurs, dommage.
EDIT : sinon, pour le dernier point JS (pas d'autre solution), mais je déteste utiliser le JS pour de l'affichage.
Modifié par SolidSnake (18 Mar 2016 - 08:36)

RenNa a écrit :

Là aussi je ne vois pas comment faire pour avoir l'effet de transition.

Bonjour !

La transition est appliquée sur l'élément qui se déplace grâce à 'transform'...

SolidSnake a écrit :
Bonjour,

Un truc du genre : http://codepen.io/anon/pen/bpgmGO
Par contre je pensais pouvoir utiliser les data-* avec attr(), mais ce n'est pas encore implémenté par les navigateurs, dommage.
EDIT : sinon, pour le dernier point JS (pas d'autre solution), mais je déteste utiliser le JS pour de l'affichage.

Oui effectivement cela fonctionne sur tous les navigateurs.
Le problème c'est que lorsque je l'intègre il apparait effectivement au bon endroit avec la transition, mais le texte titre centré de la DIV disparait.

Zelena a écrit :


Bonjour !

La transition est appliquée sur l'élément qui se déplace grâce à 'transform'...

Honnêtement je ne comprend pas trop ce que je dois changer pour avoir ma transition.

Bonjour !

Mille excuses : j'ai ajouté de la confusion.
J'avais mal compris : pour moi l'animation c'est du mouvement.

Effectivement, j'ai essayé de le faire et je suis arrivé à quelque chose de comparable à ce qu'il y a dans le codepen. Et en effet, si on met quelque chose dans le div, il disparait.

Ma solution, (pas très élégante j'en conviens) : remettre le titre dans la propriété 'content' ou alors carrément faire un autre 'div ' en mettant le même contenu.

(Et encore une fois désolée.)

SolidSnake a écrit :
Bonjour,

Bof, il y a juste à mettre une span à l'intérieur (ou autre) en position relative ou absolute, et c'est réglé.

J'avais mis une div à l'intérieur mais j'avais pas spécifié la position. Effectivement ça fonctionne.

Tu vas me dire que je suis tatillon, mais sous Safari et iOS quand je survole la div où le background change pour passer de l'image N&B à l'image COULEUR la transition se fait avec un petit décalage (genre 1px) ce qui fait bouger le texte et l'image (background). C'est encore plus visible sous iOS.
Cela n'a pas lieu sous firefox et chrome (pas testé sous windows, uniquement sous MacOS et iOS).
Sais-tu pourquoi ?
http://www.renna.fr/articles/aatest.html
(J'ai utilisé ton code uniquement pour le premier article: Prototypes Motos...)

Encore merci.
Modifié par RenNa (26 Mar 2016 - 17:39)