Titre: animation ne fonctionne pas
Posté par: ickyknox le le 04-09-2012 a 11:51:44
Bonjour,
sur :
http://icreatorbeta.free.fr/
j'ai dans mon menu des boutons (accueil, blog, contact ....).
En passant la souris dessus, le bouton devient noir INSTENTANÉMENT.
J'aimerai que le bouton devienne noir mais progressivement. Et qu'il redevienne normal en enlevant la souris, progressivement aussi.
Seulement mon code n'a pas l'air de fonctionner.
Je voulais savoir si vous aviez une idée d'où peut venir mon problème ?
Je vous remercie d'avance !
NB : l'animation est appliquée que dans le bouton ACCUEIL, je ferais le reste une fois que le code sera juste
HTML :
[CODE] <!-- BOUTONS ACCUEIL -->
<nav id="heada">
<ul id="header-menu" >
<li class="header-menu-choix" >
<a href="#" style="-webkit- transition: all 0.8s ease-in-out; -moz-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out;transition: all 0.8s ease-in-out;">Accueil</a></li>
<li class="header-menu-choix"><a href="#">Blog</a></li>
<li class="header-menu-choix"><a href="#">Contact</a></li>
<li class="header-menu-choix"><a href="#">Parrainage</a></li>
<li class="header-menu-choix"><a href="#">Produits</a></li>
<li class="header-menu-choix"><a href="#">Partenaires</a></li>
</ul>
</nav>
</div>[/CODE]
CSS :
[CODE]
/* ACCUEIL */
#heada {
width: 100%;
float:left;
}
#header-menu {
margin: 0;
padding: 1ex;
}
.header-menu-choix {
display: inline-block;
margin-top: 10px;
}
.header-menu-choix a {
display: block;
color: black;
font-size: 150%;
padding: 1em;
font-variant: small-caps;
text-decoration: none;
line-height: 10px;
border-radius: 2ex;
-o-transition: background-color 0.8s; -moz-transition: background-color 0.8s; -webkit-transition: background-color 0.8s; transition: background-color 0.8s;
}
.header-menu-choix a:hover {
background: rgb(79,80,86); /* Old browsers */
background: -moz-linear-gradient(top, rgba(79,80,86,1) 0%, rgba(73,76,79,1) 45%, rgba(10,14,10,1) 60%, rgba(10,8,9,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(79,80,86,1)), color-stop(45%,rgba(73,76,79,1)), color-stop(60%,rgba(10,14,10,1)), color-stop(100%,rgba(10,8,9,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(79,80,86,1) 0%,rgba(73,76,79,1) 45%,rgba(10,14,10,1) 60%,rgba(10,8,9,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f5056', endColorstr='#0a0809',GradientType=0 ); /* IE6-9 */
text-decoration: none;
color: white;
}[/CODE]
<config>Mac OS X / Chrome 21.0.1180.89</config> |
Titre: Re:animation ne fonctionne pas
Posté par: WebD le le 04-09-2012 a 14:26:11
C'est ton css qui n'est pas bon:
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s; |
Titre: Re:animation ne fonctionne pas
Posté par: ickyknox le le 04-09-2012 a 15:06:54
merci webdd pour cette réponse.
De mon coté j'ai changé, mais ca ne fonctionne toujours pas :
<nav id="heada">
<ul id="header-menu" >
<li class="header-menu-choix" >
<a href="#" style="
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;">Accueil</a></li>
<li class="header-menu-choix"><a href="#">Blog</a></li>
<li class="header-menu-choix"><a href="#">Contact</a></li>
<li class="header-menu-choix"><a href="#">Parrainage</a></li>
<li class="header-menu-choix"><a href="#">Produits</a></li>
<li class="header-menu-choix"><a href="#">Partenaires</a></li>
</ul>
</nav>
</div>
.header-menu-choix a {
display: block;
color: black;
font-size: 150%;
padding: 1em;
font-variant: small-caps;
text-decoration: none;
line-height: 10px;
border-radius: 2ex;
-webkit-transition-property: background-color;
-webkit-transition-duration: 2s;
-moz-transition-property: background-color;
-moz-transition-duration: 2s;
} |
Titre: Re:animation ne fonctionne pas
Posté par: WebD le le 05-09-2012 a 03:39:40
| Il faut que tu ajoutes le :hover |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|