Почему мой переход CSS3 не работает в Firefox?

#firefox #css

Вопрос:

Насколько я могу судить, он работает в другом месте сайта, используя тот же CSS. Он работает в Chrome. Вот полная страница: anthonyotislawrence.com

Вот часть, которая не работает:

 <a class="socialBox linkedIn">
    <h3>LinkedIn</h3>
    <p>linkedin.com/anthonyotislawrence</p>
</a> 
<a class="socialBox facebook">
    <h3>Facebook</h3>
    <p>facebook.com/anthonyotislawrence</p>
</a>

и CSS

 .socialBox {
    display:block;
    min-width:200px;
    padding:4px 0 4px 55px;
    height:40px;
    line-height:20px;
    background-repeat:no-repeat;
    background-position:left center;
    position:relative;
    -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    transition: all .5s ease-out;
    text-decoration:none;
    margin:30px 0;
}
.socialBox.linkedIn {
    background-image:url(../images/linkedin.png);
}
.socialBox.facebook {
    background-image:url(../images/facebook.png);
}
.socialBox:hover {
    left:15px;
    cursor:pointer;
}
.socialBox:hover p {
    text-decoration:underline;
}

1. Привет, у меня в моем проекте практически такой же структурированный css, как у вас, и у меня такая же проблема в FF … Я думаю, это связано со свойством background-image … Я изменил свое фоновое изображение: url (../ images / linkedin.png); на простой фон, чтобы посмотреть, сработает ли переход, и это сработало … background: #fff; … это все еще не решает проблему, но это просто указывает, что это связано с использованием перехода на фоновом изображении .. я все еще ищу решения…

Ответ №1:

Похоже, что FF не будет передавать значения по умолчанию. Они должны быть объявлены в исходном элементе, прежде чем он перейдет к новым свойствам.

1. Я делаю то, что предложено в этом ответе, и до сих пор нет компонентов. Я пытаюсь перейти к началу и непрозрачности, и это не анимирует.

2. слава богу.. вы только что сэкономили мне столько времени. Бен, ты босс

3. Спасибо. Это также влияет на браузеры Webkit.

4. @Ben Привет, у меня в моем проекте практически такой же структурированный css, как этот, и у меня такая же проблема в FF … Я думаю, это связано со свойством background-image … Я изменил свое фоновое изображение: url (../ images / linkedin.png); на простой фон, чтобы посмотреть, сработает ли переход, и это сработало … background: #fff; … это не решает проблему, а просто указывает, что это связано с использованием перехода на фоновом изображении .. я все еще ищу решения… есть идеи? Спасибо

5. @Ben me again .. на самом деле я только что узнал, что background-image не является анимируемым свойством… теперь это имеет смысл .. w3.org/TR/css3-transitions/#animatable-properties

Ответ №2:

У меня была проблема, похожая на OP, когда мои переходы работали во всех браузерах, кроме Firefox. В моем случае у меня были интервалы в ноль секунд. Я использовал только 0, а не 0s. Это привело к тому, что переход вообще не работал в Firefox. Я не думаю, что это было проблемой для OP, но публикую здесь на случай, если это поможет кому-то еще.

Это не работает в Firefox:

 top 0 linear 1s

Это работает:

 top 0s linear 1s