Простая анимация ключевых кадров CSS3 не работает в Firefox
Я создал одну простую анимацию ключевых кадров CSS3, которая переключает изображение элемента. Он работает отлично, но мой верный Firefox подвел меня. Сначала я использовал префикс free, потом подумал, что это может быть проблемой, после этого я написал все префиксы от руки, но в Firefox все еще ничего.
Вы можете увидеть пример по адресу: http://madebym.me/test/nimbus/index.html
Кроме того, вот соответствующий код, грузовик должен включать и выключать свет.
-webkit-animation: switch-truck-lights 1s linear infinite normal;
-moz-animation: switch-truck-lights 1s linear infinite normal;
-ms-animation: switch-truck-lights 1s linear infinite normal;
-o-animation: switch-truck-lights 1s linear infinite normal;
animation: switch-truck-lights 1s linear infinite normal;
}
@keyframes "switch-truck-lights" {
from {
background-image: url(../images/truck-off.png);
}
to {
background-image: url(../images/truck-on.png);
}
}
@-moz-keyframes switch-truck-lights {
from {
background-image: url(../images/truck-off.png);
}
to {
background-image: url(../images/truck-on.png);
};
}
@-webkit-keyframes "switch-truck-lights" {
from {
background-image: url(../images/truck-off.png);
}
to {
background-image: url(../images/truck-on.png);
};
}
@-ms-keyframes "switch-truck-lights" {
from {
background-image: url(../images/truck-off.png);
}
to {
background-image: url(../images/truck-on.png);
};
}
@-o-keyframes "switch-truck-lights" {
from {
background-image: url(../images/truck-off.png);
}
to {
background-image: url(../images/truck-on.png);
};
}
1 ответ
Кажется, что background-position не является допустимым свойством перехода / анимации. По какой-то причине это работает в Chrome, но единственное другое решение - это постепенное исчезновение абсолютно позиционированных изображений или анимация фонового положения спрайта изображения.
Что именно то, что я сделал.