web-dev-qa-db-fra.com

La transition CSS3 ne fonctionne pas

Je ne pouvais pas travailler sur les transitions cette page , quelqu'un a une idée de pourquoi?

div.sicon a {
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}
csscss3css-transitions
8
Extelliqent

La transition s'apparente plus à une animation.

div.sicon a {
    background:-moz-radial-gradient(left, #ffffff 24%, #cba334 88%);
    transition: background 0.5s linear;
    -moz-transition: background 0.5s linear; /* Firefox 4 */
    -webkit-transition: background 0.5s linear; /* Safari and Chrome */
    -o-transition: background 0.5s linear; /* Opera */
    -ms-transition: background 0.5s linear; /* Explorer 10 */
}

Vous devez donc appeler cette animation avec une action.

div.sicon a:hover {
    background:-moz-radial-gradient(left, #cba334 24%, #ffffff 88%);
}

Vérifiez également la prise en charge du navigateur et si vous rencontrez toujours des problèmes avec ce que vous essayez de faire! Vérifiez css-overrides dans votre feuille de style et vérifiez également si behavior: ***.htc css a été piraté .. il peut y avoir quelque chose qui surcharge votre transition!

Vous devriez vérifier ceci: http://www.w3schools.com/css/css3_transitions.asp

12
Berker Yüceer

Est-ce ce dont vous avez besoin:

http://jsfiddle.net/vSUQP/16/

3
user106197

Pour moi, c'était display: none;

#spinner-success-text {
    display: none;
    transition: all 1s ease-in;
}

#spinner-success-text.show {
    display: block;
}

Le supprimer et utiliser plutôt opacity a résolu le problème.

#spinner-success-text {
    opacity: 0;
    transition: all 1s ease-in;
}

#spinner-success-text.show {
    opacity: 1;
}
3
Abdoosk

Une réponse générale à une question générale ... Les transitions ne peuvent pas animer des propriétés qui sont auto. Si une transition ne fonctionne pas, vérifiez que la valeur de départ de la propriété est définie explicitement. (Par exemple, pour réduire un nœud, lorsque sa hauteur est automatique et doit rester ainsi, définissez plutôt la transition sur max-height. Attribuez à max-height une valeur initiale raisonnable, puis faites-la passer à 0)

0
bbsimonbb