28172 sujets

CSS et mise en forme, CSS3

Probleme de Transition css3 avec (chrome)

Bonjour

avant de posté mon probleme je tien a remercier toutes la comunauté Alsacreation pour l'aide apporté developpeur debutant Smiley biggrin

voila pour mon premier post :

je fait une mise en page de base pour tester les differentes possibilités de html5/css3.

sur mon menu j'ai fait une une transition de couleur de text et de couleur de fond de ma cellules,
jusque la ca marche sur tout les navigateur sauf IE ( pour le momment je le laisse de coter Smiley fache )

le probleme vien de chrome, apres un clic sur un bouton de mon menu la transition ne se fait plus.

si je vide le cache du navigateur ca marche mais apres un clique ca ne marche plus a nouveau lol

voila ma page

www.barbe-team.fr

voici ma page html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>Page type html5</title>
    </head>

    <body>
        <div id="conteneur">
            
            <header>
                <h1>Titre</h1>
            </header>
            
            <section id="contourmenu">
            <nav>
                <ul>
                    <li><a href="#" class="cellules">menu01</a></li>
                    <li><a href="#" class="cellules">menu02</a></li>
                    <li><a href="#" class="cellules">menu03</a></li>
                    <li><a href="#" class="cellules">menu04</a></li>
                    <li><a href="#" class="cellules">menu05</a></li>
                </ul>
            </nav>
            </section>
            
            <section></section>

            <aside class="aside01"></aside>
            <aside class="aside02"></aside>     
       
            
<br class="anule" />

            <footer class="piedpage">Footer de la page</footer>
            
        </div>
    </body>
</html>


et ma page css (juste la parti concerné)

#contourmenu {

    width: 900px;
    height: 30px;
    background-color: green;
    margin-top: 20px;
    padding: 0px;
    border-radius: 10px 10px 10px 10px;
}
nav ul {
   
    list-style-type: none;
    padding: 0px;
    margin-top: 5px;
    margin-left: 200px;
    width: 900px;
    height: 20px;   
}

.cellules {
    text-align: center;
    line-height: 20px;
    display: block;
    width: 100px;
    
    border-radius: 5px 5px 5px 5px;
    background-color: #fff;
    color: #000;
    text-decoration: none;
    margin: 0px;
    padding: 0px;

    -moz-transition-property:color, background-color;  
    -moz-transition-duration: 1s, 1s;
    -webkit-transition-property:color, background-color;  
    -webkit-transition-duration: 1s, 1s;
    -o-transition-property:color, background-color;  
    -o-transition-duration: 1s, 1s;
}

.cellules:hover {
   
    border-bottom: solid 1px #34cdf9;
    background-color: #000;
    color: #34cdf9;
    text-decoration: none;
}


merci beaucoup
Modifié par helium (27 Jan 2012 - 17:10)
bonsoir,

peut-être faut-il aussi initialisé :" transition-timing-function" avec ease-in-out par exemple. Cette déclaration manque probablement à Chrome .

cordialement,
GC
Sujet clos
Aller à