pourquoi transition css ne fonctionne pas

J'essaie d'ajouter de transition, mais il ne marche pas
J'ai ajouté de la transition à mes liens et s'attendre à des changements sur l'état de pointage
J'ai utilisé de la transition beaucoup, mais quelques fois cela m'arrive et je ne sais pas pourquoi cette propriété ne fonctionne pas

Je préfère savoir pourquoi il ne marche pas

c'est mon code

<div class="subNavigation">
                        <ul>
                            <li>درباره بانک مهر</li>
                            <li><a href="javascript:void(0)">درباره بانک مهر 1</a></li>
                            <li><a href="javascript:void(0)">درباره بانک مهر 2</a></li>
                            <li><a href="javascript:void(0)">درباره بانک مهر 3</a></li>
                            <li><a href="javascript:void(0)">درباره بانک مهر 4</a></li>
                        </ul>
                    </div>

et css

.subNavigation {
width: 900px;
height: 274px;
position: absolute;
top: 40px;
right: 0;
padding: 30px 60px 0 0;
}
/* line 126, ../sass/style.scss */
.subNavigation ul {
float: right;
}
/* line 130, ../sass/style.scss */
.subNavigation li {
width: 153px;
*zoom: 1;
margin-top: 4px;
padding-right: 2px;
padding-bottom: 4px;
border-bottom: 1px dotted #b4b4b4;
}
/* line 38, D:/Ruby193/lib/ruby/gems/1.9.1/gems/compass-      0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.subNavigation li:after {
content: "";
display: table;
clear: both;
}
/* line 138, ../sass/style.scss */
.subNavigation li:first-child {
width: 155px;
height: 24px;
margin-top: 0;
margin-bottom: 14px;
color: #f7931e;
border-bottom: 1px solid #dddddd;
padding-right: 0;
font-size: 16px;
line-height: 24px;
}
/* line 151, ../sass/style.scss */
.subNavigation a {
float: right;
font-size: 13px;
height: 24px;
line-height: 24px;
padding-right: 2px;
color: #222;
-webkit-transition: all, 0.2s, ease-in;
-moz-transition: all, 0.2s, ease-in;
-o-transition: all, 0.2s, ease-in;
transition: all, 0.2s, ease-in;
}
/* line 160, ../sass/style.scss */
.subNavigation a.eng {
font-family: tahoma;
}
/* line 164, ../sass/style.scss */
.subNavigation a:hover {
padding-right: 10px;
border-right: 4px solid #f7941d;
color: #19ae61;
}

Le Violon

OriginalL'auteur Cameron A | 2013-06-13

  1. 11

    Une simple erreur:

    -webkit-transition: all, 0.2s, ease-in;
-moz-transition: all, 0.2s, ease-in;
-o-transition: all, 0.2s, ease-in;
transition: all, 0.2s, ease-in;

    Changement:

    -webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;

    Démo: http://jsfiddle.net/X5UBF/1/

    Transition valeurs ne sont pas séparés par une virgule. Ils sont une déclaration unique. Si vous souhaitez déclarer plusieurs transitions, PUIS vous les séparer par des virgules.

    Voir W3C Docs ou/et CSS3.info

    Value: <single-transition> [ ‘,’ <single-transition> ]*

    Où <single-transition> est:

    <single-transition> = <transition-property> <transition-duration> <transition-timing-function> <transition-delay>

    Donc, séparés par des virgules exemple serait:

    transition: opacity 0.5s ease-in, width 1.5s ease-out;
/* 0.5s for an opacity transform while 1.5s for a width transform */
    tanx, boussole toujours me rendre fou 😉
    Je me suis arrêté à l'aide de la Boussole intégrée mixin, car je crois que j'avais les mains liées (je ne sais pas ce qui se passe sous le capot). Alors j'ai fini de faire mon propre _mixins.scss où je crée ce que je veux avec tout nom que j'aime (j'aime le camel cas mixin noms, par exemple borderRadius() au lieu de construire-dans border-radius()).

    OriginalL'auteur RaphaelDDL

  2. 1

    Une mauvaise déclaration de transition:

     -webkit-transition: all 0.2s ease-in;  /* Chrome 1-25, Safari 3.2+ */
-moz-transition: all 0.2s ease-in;  /* Firefox 4-15 */
-o-transition: all 0.2s ease-in;  /* Opera 10.50–12.00 */
transition: all 0.2s ease-in;  /* Chrome 26, Firefox 16+, IE 10+, Opera 12.10+ */

    OriginalL'auteur David Nguyen