CSS работает на Chrome, но не на Firefox

Я пробовал много вещей, но ничего не работает, idk, если это свойство transform/translateX или нет. Я пытался выцветать, и это сработало, но подпрыгивание и переводчик не работают. В настоящее время я использую программное обеспечение для торможения, и я также пробовал возвышенный тест 2. Пожалуйста, помогите. Спасибо.CSS работает на Chrome, но не на Firefox

/*animations*/ 

/****************** 
* Bounce in right * 
*******************/ 


.animated { 
-webkit-animation-duration: 1s; 
-moz-animation-duration: 1s; 
-webkit-animation-fill-mode: both; 
-moz-animation-fill-mode: both; 
} 
.slow{ 
-webkit-animation-duration: 2s; 
-moz-animation-duration: 2s; 
-webkit-animation-fill-mode: both; 
-moz-animation-fill-mode: both; 
} 
.slower{ 
-webkit-animation-duration: 3s; 
-moz-animation-duration: 3s; 
-webkit-animation-fill-mode: both; 
-moz-animation-fill-mode: both; 
} 
.slowest{ 
-webkit-animation-duration: 4s; 
-moz-animation-duration: 4s; 
-webkit-animation-fill-mode: both; 
-moz-animation-fill-mode: both; 
} 

.bounceInRight, .bounceInLeft, .bounceInUp, .bounceInDown{ 
opacity:0; 
-webkit-transform: translateX(100px); 
-moz-transform: translateX(100px); 
} 
.fadeInRight, .fadeInLeft, .fadeInUp, .fadeInDown{ 
opacity:0; 
-webkit-transform: translateX(400px); 
-moz-transform: translateX(400px); 
} 

.flipInX, .flipInY, .rotateIn, .rotateInUpLeft, .rotateInUpRight, 
.rotateInDownLeft, .rotateDownUpRight, .rollIn{ 
opacity:0; 
} 

.lightSpeedInRight, .lightSpeedInLeft{ 
opacity:0; 
-webkit-transform: translateX(400px); 
-moz-transform: translateX(400px); 
} 

/*********** 
* bounceIn * 
************/ 
@-webkit-keyframes bounceIn { 
0% { 
    opacity: 0; 
    -webkit-transform: scale(.3); 
} 

50% { 
    opacity: 1; 
    -webkit-transform: scale(1.05); 
} 

70% { 
    -webkit-transform: scale(.9); 
} 

100% { 
    -webkit-transform: scale(1); 
} 
} 

@-moz-keyframes bounceIn { 
0% { 
    opacity: 0; 
    -moz-transform: scale(.3); 
} 

50% { 
    opacity: 1; 
    -moz-transform: scale(1.05); 
} 

70% { 
-moz- transform: scale(.9); 
} 

100% { 
    -moz-transform: scale(1); 
} 
} 

.bounceIn.go { 
-webkit-animation-name: bounceIn; 
-moz-animation-name: bounceIn; 
} 

/**************** 
* bounceInRight * 
****************/ 

@-webkit-keyframes bounceInRight { 
0% { 
    opacity: 0; 

    -webkit-transform: translateX(100px); 
} 
30%{ 
    -webkit-transform: translateX(100px) 
} 
60% { 

    -webkit-transform: translateX(-10px); 
} 
80% { 
    -webkit-transform: translateX(5px); 
} 
100% { 
opacity: 1; 

    -webkit-transform: translateX(0); 
} 
} 

@-moz-keyframes bounceInRight { 
0% { 
    opacity: 1; 

-moz- transform: translateX(100px); 
} 
30%{ 
-moz- transform: translateX(100px) 
} 

60% { 

    -moz-transform: translateX(-10px); 
} 
80% { 
    -moz-transform: translateX(5px); 
} 
100% { 
opacity: 1; 

    -moz-transform: translateX(0); 
} 
} 


.bounceInRight.go { 
-webkit-animation-name: bounceInRight; 
-moz-animation-name: bounceInRight; 
}

источник

2015-08-27 Hatim Yaaqba

Вот мой код HTML http://www.mediafire.com/view/oudhcsh91ypsjlg/html%20code.docx –

, пожалуйста, отредактируйте свой вопрос, чтобы включить соответствующие части вашего html. ссылка на удаленный документ Word не является хорошей идеей – nomistic

Вы должны добавить еще один набор CSS без префикса поставщика. – Raptor

Сначала проверьте свой синтаксис. Я заметил, что есть некоторые «сломанные» свойства, написанные «-moz-transform». Это должно быть одно слово. Во-вторых, вы могли бы предоставить некоторый HTML или jsfiddle?

(я не мог опубликовать его в качестве комментария - не хватает репутации, чтобы сделать это.)

источник

2015-08-27 02:35:23

Я попробовал jsfiddle, но он не работал. т. к. он работает отлично на хроме. –

http://jsfiddle.net/hatimyaaqba/a089adpk/#base –

Да, именно так. Хорошая работа! P.S. Просто начал набирать ответ, так как увидел, что вы уже нашли решение. :) В любом случае, чтобы немного конкрутировать, я бы сказал, что вам даже не нужны префиксы для поставщиков. (По крайней мере, не -moz-префиксы, поскольку Firefox теперь поддерживает свойство с префиксом ...) (http://caniuse.com/#search=css-animation) –

Вам нужны префиксов свойства.

Так, например:

.animated { 
-webkit-animation-duration: 1s; 
-moz-animation-duration: 1s; 
animation-duration: 1s; // unprefixed 
-webkit-animation-fill-mode: both; 
-moz-animation-fill-mode: both; 
animation-duration: 1s; // unprefixed 
}

источник

2015-08-27 02:40:21 codeaddict

Я сделал то, что вы сказали мне, но все же, он не работает в Firefox. http://www.mediafire.com/view/8e5b8oi4rpce96b/css_code.docx –

http://jsfiddle.net/hatimyaaqba/a089adpk/#base –

Спасибо за вашу помощь. Я нашел ответ. В моем html-коде было что-то неправильно: style='display:inline, он работает на chrome, но для Firefox и Safari вы должны использовать это: style='display:inline-block. Еще раз спасибо.

источник

2015-08-27 23:13:00

ответ

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