Discussion :

[flozza]

Bonsoir à tous

Je me heurte à un problème bien bizarre avec les transitions de css..
J'ai créé une classe "fade" sur des liens, et je me rend compte qu'ils ne fonctionnent pas bien.En effet, certains marchent, d'autres non...
J'ai donc enlevé tout le contenu de la page balise par balise, jusqu'à me retrouver avec 1 lien, et le stylesheet. Ce lien prend les propriétés de couleurs mais aucune transition. Alors je me retrouve à modifier le href de <a> et là j'arrive à cibler le problème. Sauf que ça m'avance pas plus.
J'explique:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="index.php" class="fade">Accueil</a>

--> Aucune transition

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="#" class="fade">Accueil</a>

--> Ca marche

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="index.html" class="fade">Accueil</a>

--> Ca marche

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a href="inde.php" class="fade">Accueil</a>

--> Ca marche!...

Le fait que le lien mène vers "index.php" annule la transition!

Voila le css au cas où:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
a.fade, 
a.fade:link,
a.fade:visited { 
color: #000000; 
text-decoration: none;
font-weight: bold; 
	-webkit-transition:all 220ms ease-in;
	-o-transition:all 220ms ease-in;
	-moz-transition:all 220ms ease-in;
	-opera-transition:all 220ms ease-in;
	-khtml-transition:all 220ms ease-in;
	transition:all 220ms ease-in;
}
 
 
a.fade:hover,
a.fade:active { 
color: #3d9ecf; 
text-decoration: none;	
background: none;
font-weight: bold;
 
	-webkit-transition:all 220ms ease-in;
	-o-transition:all 220ms ease-in;
	-moz-transition:all 220ms ease-in;
	transition:all 220ms ease-in;
		-opera-transition:all 220ms ease-in;
	-khtml-transition:all 220ms ease-in;
 
 }

Je vois vraiment pas pourquoi... Si l'un d'entre vous en sait plus que moi ?

EDIT: Problème présent seulement sur google chrome
Opéra - firefox ok
IE la question ne se pose pas vue qu'il ne prend pas en charge les transitions

[Emyleen]

Bonjour!

Je ne connaissais pas les transitions css3, grâce à toi je viens d'augmenter ma culture

Essaye de voir si tu n'as pas mis une propriété css sur ce lien là précisément et qui serait en rapport avec Google Chrome. Sinon je t'avoue que je ne vois pas pourquoi la cible du lien serait la source du problème.

Vérifie si ta transition fonctionne sur Safari, car il utilise webkit aussi comme Chrome

[flozza]

Bonjour

oui css a une multitude de propriété.. et elles sont très pratiques.
Un vrai plaisir.

Bon, pour mon problème, que dire... J'ai installé safari, me suis rendu sur le site, les liens marchaient parfaitement. Je suis retourné sur chrome, et puis là mystère ça remarche.. un bug sur chrome je pense, puisque j'avais bien vidé les caches, ça peut pas être autre chose. Merci pour ces suggestions

Voilà qui pourra peut être encore plus élargir ta culture en remerciement:
http://www.css-faciles.com/propriete...phabetique.php
http://meiert.com/en/indices/css-properties/

Elles n'y sont peut être pas toutes, mais y en a une bonne partie! ça te servira j'espère..

Merci encore