Почему этот переход CSS не работает?

Является ли это прочным, кросс-браузерным способом реализации переходов? Я понятия не имею, что я могу делать неправильно?Почему этот переход CSS не работает?

Fiddle

HTML:

<div id="sideBar"> 
    <ul class="sideMenu"> 
     <li><a href="#">Beat of the Day</a></li> 
     <li><a href="#">Cyborg DB</a></li> 
     <li><a href="#">Hadiaris.com</a></li> 
     <li><a href="#">DriversEd.com</a></li> 
     <li> 
      <a href="#">Controlco</a>   
      <ul> 
       <li><a href="#">GGP</a></li> 
       <li><a href="#">TVA</a></li> 
      </ul> 
     </li> 
    </ul> 
</div>

CSS:

.sideMenu a { 
    display: block; 
    width: 150px; 
    padding: 5px 5px 5px 10px; 
    margin: 0px 0px 0px 10px; 
    border-radius: 50px; 
    color: black; 
    -moz-transition: color .9s, -moz-transform .9s; 
    -webkit-transition: color .9s, -moz-transform .9s; 
    -o-transition: color .9s, -moz-transform .9s; 
    transition: color .9s, -moz-transform .9s; 
} 
.sideMenu a:hover { 
    box-shadow: inset 0px 0px 5px 0px black; 
    color: blue; 
}

источник

2013-03-12 dezman

CSS переходы работают на "некоторые" браузеры – blackhawk

Internet Explorer 10 и выше поддерживают CSS3 переход. –

@blachawk Я использую Chrome на windows8, поэтому он должен работать, другие переходы на моей странице работают с аналогичной реализацией. – dezman

Вы должны избавиться от , -moz-transform .9s в объявлении перехода.

.sideMenu a { 
    display: block; 
    width: 150px; 
    padding: 5px 5px 5px 10px; 
    margin: 0px 0px 0px 10px; 
    border-radius: 50px; 
    color: black; 
    -moz-transition: color .9s; 
    -webkit-transition: color .9s; 
    -o-transition: color .9s; 
    transition: color .9s; 
} 
.sideMenu a:hover { 
    box-shadow: inset 0px 0px 5px 0px black; 
    color: blue; 
}

источник

2013-03-12 17:53:46

Ваши transform значения все используют версию -moz-. Кроме того, ваш переход будет работать только тогда, когда вы будете «поддерживать» то, как у вас есть. Если вы добавите переходы в оба правила, вы также получите преобразование при наведении.

Updated fiddle

.sideMenu a { 
    display: block; 
    width: 150px; 
    padding: 5px 5px 5px 10px; 
    margin: 0px 0px 0px 10px; 
    border-radius: 50px; 
    color: black; 
    -moz-transition: color .9s, -moz-transform .9s; 
    -webkit-transition: color .9s, -webkit-transform .9s; 
    -o-transition: color .9s, -o-transform .9s; 
    transition: color .9s, transform .9s; 
} 
.sideMenu a:hover { 
    box-shadow: inset 0px 0px 5px 0px black; 
    color: blue; 

    -moz-transition: color .9s, -moz-transform .9s; 
    -webkit-transition: color .9s, -webkit-transform .9s; 
    -o-transition: color .9s, -o-transform .9s; 
    transition: color .9s, transform .9s; 
}

источник

2013-03-12 17:53:16

Правильно, я глуп, я просто не мог этого увидеть! – dezman

Неверно: «Кроме того, ваш переход будет работать только тогда, когда« неудержим », как у вас есть». Если переход применяется к 'a' (без псевдо), он применяется всегда. «A: hover» по-прежнему является «a». Как и все другие свойства. – Rudie

Ваш -moz-transform вызывает проблемы. Если вы просто хотите, чтобы оживить color свойство, вы можете удалить его:

-moz-transition: color .9s; 
    -webkit-transition: color .9s; 
    -o-transition: color .9s; 
    transition: color .9s; 
}

Demo: http://jsfiddle.net/C83Yd/1/

источник

2013-03-12 17:54:04 Blender

Почему этот переход CSS не работает?

ответ

Смежные вопросы