Ответ 1
Похоже, что FF не изменит значения по умолчанию. Они должны быть объявлены на исходном элементе, прежде чем он перейдет к новым свойствам.
Он работает в другом месте на сайте, используя тот же 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;
}
Похоже, что FF не изменит значения по умолчанию. Они должны быть объявлены на исходном элементе, прежде чем он перейдет к новым свойствам.
У меня была проблема, похожая на OP, где мои переходы работали в каждом браузере, кроме Firefox. В моем случае у меня были интервалы в 0 секунд. Я использовал только 0, а не 0. Это привело к тому, что переход не работал вообще в Firefox. Я не думаю, что это было проблемой для OP, но публиковать здесь, если это помогает кому-то другому.
Это не работает в Firefox:
top 0 linear 1s
Это работает:
top 0s linear 1s