problème transition

Sujet résolu

13 novembre 2011 à 20:08:19

Bonjour

j'ai des problèmes avec la fonction transition en css

.button {
    font-family:Arial,sans-serif;
    font-size:1.6em;
    width:200px;
    height:43px;
    padding-top:7px;
    text-align:center;
    color:#000;
    background:#444;
    background:-moz-linear-gradient(top,#555,#2C2C2C);
    background:-webkit-gradient(linear, left top, left bottom, from(#555), to(#2C2C2C));
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    text-shadow:0px 1px 0px rgba(255,255,255,0.2);
    -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5),
        0 -1px 0 rgba(255,255,255,0.4);
    -moz-box-shadow:0 0 5px rgba(0,0,0,0.5),
        0 -1px 0 rgba(255,255,255,0.4);
    box-shadow:0 0 5px rgba(0,0,0,0.5),
        0 -1px 0 rgba(255,255,255,0.4);
    margin-bottom: 20px;
    -webkit-transition: all .6s ease-in;
    -moz-transition: all .6s ease-in;
    -o-transition: all .6s ease-in;
    transition: all .6s ease-in;
}
.button:hover{
    text-decoration: none;
    color:#222;
    background:#555;
    background:-moz-linear-gradient( top, #777, #333);
    background:-webkit-gradient( linear, left top, left bottom, from(#777), to(#333));
}

La transition ne s’effectue pas

Pourriez vous m'aider

Merci

Blaitox

13 novembre 2011 à 20:14:15

Lu'

En mettant ta durée en ms peut-être ? sinon je vois pas :/

Anthebest

13 novembre 2011 à 20:18:33

non

lofo7

13 novembre 2011 à 22:22:35

Hello,
tu as une erreur sur le background. Change background en background-color et ça marchera.
Je vois que tu as mis une transition pour la couleur du lien aussi mais, vu la minime différence de couleur entre les deux, on ne voit pas la transition.

Anthebest

14 novembre 2011 à 9:09:56

Non, ça ne change toujours rien

le hollandais volant

14 novembre 2011 à 10:05:10

Salut !

Pas certains que le "all" dans "transition" soit reconnu :

-webkit-transition: all .6s ease-in;
-moz-transition: all .6s ease-in;
-o-transition: all .6s ease-in;
transition: all .6s ease-in;

Utilises plutôt ça :

transition: background-color .6s ease-in, color .6s ease-in ;

Frogweb

14 novembre 2011 à 10:41:22

Salut,

moi c'est le point devant les 6s qui me gène...

transition-property: all;
transition-duration: 6s;

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

le hollandais volant

14 novembre 2011 à 10:52:09

Le point signifie la décimale : .6s = 6/10s.
Il est parfaitement légal.

Mais, peut-être que le remplacer temporairement par 6 secondes permettrait de visualiser clairement la présence de l'effet de transition…

lofo7

14 novembre 2011 à 15:19:21

Citation : Anthebest

Non, ça ne change toujours rien

Ca ne change rien, ça ne change rien ! Ben chez moi ça change tout et ça fonctionne. Mais puisque tu n'as pas l'air de maîtriser les transitions en CSS3, je te conseille de lire les 7 pages de ce qui suit : http://www.alsacreations.com/tuto/lire [...] imations.html.

Anthebest

14 novembre 2011 à 15:25:28

Si, j'ai déjà mis des transitions qui fonctionnent super bien sur du texte mais la je n'y arrive pas sur le bouton

lofo7

14 novembre 2011 à 15:38:52

Citation : Anthebest

Si, j'ai déjà mis des transitions qui fonctionnent super bien sur du texte mais la je n'y arrive pas sur le bouton

Et bien comme je t'ai dit chez moi ça fonctionne sur le bouton. Voici mon code en entier :

<!DOCTYPE html>
<html>
<head>
<style>
.button {
    font-family:Arial,sans-serif;
    font-size:1.6em;
    width:200px;
    height:43px;
    padding-top:7px;
    text-align:center;
    color:#000;
    background-color:#444;
    background-color:-moz-linear-gradient(top,#555,#2C2C2C);
    background-color:-webkit-gradient(linear, left top, left bottom, from(#555), to(#2C2C2C));
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    text-shadow:0px 1px 0px rgba(255,255,255,0.2);
    -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5),
        0 -1px 0 rgba(255,255,255,0.4);
    -moz-box-shadow:0 0 5px rgba(0,0,0,0.5),
        0 -1px 0 rgba(255,255,255,0.4);
    box-shadow:0 0 5px rgba(0,0,0,0.5),
        0 -1px 0 rgba(255,255,255,0.4);
    margin-bottom: 20px;
    -webkit-transition: all .6s ease-in;
    -moz-transition: all .6s ease-in;
    -o-transition: all .6s ease-in;
    transition: all .6s ease-in;
}
.button:hover{
    text-decoration: none;
    color:#FFF;
    background-color:#F00;
    background-color:-moz-linear-gradient( top, #777, #333);
    background-color:-webkit-gradient( linear, left top, left bottom, from(#777), to(#333));
}
</style>
</head>
<body>
<a href="#" class="button">Essai sur la transition</a>
</body>
</html>

J'ai mis la couleur rouge pour le fond et blanc pour le texte pour bien voir la transition.

Anthebest

14 novembre 2011 à 19:26:42

Merci