Преобразование CSS3 не работает в Firefox, почему?

Question

Привет, вот мой код в JSFiddle

http://jsfiddle.net/qnbxaLwh/

Вот простой HTML

<span class="arrow">xssss</span> 

Вот мой CSS

.arrow { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    padding-right:10px; 
    bottom: 5%; 
    left: 0; 
    right: 0; 
    -webkit-animation: bounce 2s infinite; 
    -moz-animation: bounce 2s infinite; 
    -ms-animation: bounce 2s infinite; 
    -o-animation: bounce 2s infinite; 
    animation: bounce 2s infinite; 
} 
@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -webkit-transform: translateY(0); 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    -o-transform: translateY(0); 
    transform: translateY(0); 
    } 
    40% { 
    -webkit-transform: translateY(-6px); 
    -moz-transform: translateY(-6px); 
    -ms-transform: translateY(-6px); 
    -o-transform: translateY(-6px); 
    transform: translateY(-6px); 
    } 
    60% { 
    -webkit-transform: translateY(-5px); 
    -moz-transform: translateY(-5px); 
    -ms-transform: translateY(-5px); 
    -o-transform: translateY(-5px); 
    transform: translateY(-5px); 
    } 
} 
@-moz-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -webkit-transform: translateY(0); 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    -o-transform: translateY(0); 
    transform: translateY(0); 
    } 
    40% { 
    -webkit-transform: translateY(-6px); 
    -moz-transform: translateY(-6px); 
    -ms-transform: translateY(-6px); 
    -o-transform: translateY(-6px); 
    transform: translateY(-6px); 
    } 
    60% { 
    -webkit-transform: translateY(-5px); 
    -moz-transform: translateY(-5px); 
    -ms-transform: translateY(-5px); 
    -o-transform: translateY(-5px); 
    transform: translateY(-5px); 
    } 
} 
@-ms-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -webkit-transform: translateY(0); 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    -o-transform: translateY(0); 
    transform: translateY(0); 
    } 
    40% { 
    -webkit-transform: translateY(-6px); 
    -moz-transform: translateY(-6px); 
    -ms-transform: translateY(-6px); 
    -o-transform: translateY(-6px); 
    transform: translateY(-6px); 
    } 
    60% { 
    -webkit-transform: translateY(-5px); 
    -moz-transform: translateY(-5px); 
    -ms-transform: translateY(-5px); 
    -o-transform: translateY(-5px); 
    transform: translateY(-5px); 
    } 
} 
@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -webkit-transform: translateY(0); 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    -o-transform: translateY(0); 
    transform: translateY(0); 
    } 
    40% { 
    -webkit-transform: translateY(-6px); 
    -moz-transform: translateY(-6px); 
    -ms-transform: translateY(-6px); 
    -o-transform: translateY(-6px); 
    transform: translateY(-6px); 
    } 
    60% { 
    -webkit-transform: translateY(-5px); 
    -moz-transform: translateY(-5px); 
    -ms-transform: translateY(-5px); 
    -o-transform: translateY(-5px); 
    transform: translateY(-5px); 
    } 
} 

Я пытался в течение нескольких часов, но я не понять, почему он не работает на firefox. Я попробовал переставить и поработать над некоторыми продуктами, но ничего не работает. не

Answer 1

изменения position:relative; в position:absolute;

работает скрипка ->http://jsfiddle.net/qnbxaLwh/1/

• вы можете удалить ключевой кадр для Firefox, Firefox больше не используется в течение 2-х лет назад.

Answer 2

Если вам нужно использовать положение относительно, попробуйте использовать некоторые инструменты, как это ->https://coveloping.com/tools/css-animation-generator

Согласно кодексу, которые они используют (рабочий Crossbrowser) вы используете неправильный префикс для вас анимации (-moz -animation имя, например ...)

Answer 3

Пожалуйста, обновите CSS

.arrow { 
 
\t position: absolute; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t padding-right:10px; 
 
\t bottom: 5%; 
 
\t left: 0; 
 
\t right: 0; 
 
    top: 0; 
 
\t -webkit-animation: bounce 2s infinite; 
 
\t -moz-animation: bounce 2s infinite; 
 
\t -ms-animation: bounce 2s infinite; 
 
\t -o-animation: bounce 2s infinite; 
 
\t animation: bounce 2s infinite; 
 
} 
 
@-webkit-keyframes bounce { 
 
\t 0%, 20%, 50%, 80%, 100% { 
 
\t -webkit-transform: translateY(0); 
 
\t -moz-transform: translateY(0); 
 
\t -ms-transform: translateY(0); 
 
\t -o-transform: translateY(0); 
 
\t transform: translateY(0); 
 
\t } 
 
\t 40% { 
 
\t -webkit-transform: translateY(-6px); 
 
\t -moz-transform: translateY(-6px); 
 
\t -ms-transform: translateY(-6px); 
 
\t -o-transform: translateY(-6px); 
 
\t transform: translateY(-6px); 
 
\t } 
 
\t 60% { 
 
\t -webkit-transform: translateY(-5px); 
 
\t -moz-transform: translateY(-5px); 
 
\t -ms-transform: translateY(-5px); 
 
\t -o-transform: translateY(-5px); 
 
\t transform: translateY(-5px); 
 
\t } 
 
} 
 
@-moz-keyframes bounce { 
 
\t 0%, 20%, 50%, 80%, 100% { 
 
\t -webkit-transform: translateY(0); 
 
\t -moz-transform: translateY(0); 
 
\t -ms-transform: translateY(0); 
 
\t -o-transform: translateY(0); 
 
\t transform: translateY(0); 
 
\t } 
 
\t 40% { 
 
\t -webkit-transform: translateY(-6px); 
 
\t -moz-transform: translateY(-6px); 
 
\t -ms-transform: translateY(-6px); 
 
\t -o-transform: translateY(-6px); 
 
\t transform: translateY(-6px); 
 
\t } 
 
\t 60% { 
 
\t -webkit-transform: translateY(-5px); 
 
\t -moz-transform: translateY(-5px); 
 
\t -ms-transform: translateY(-5px); 
 
\t -o-transform: translateY(-5px); 
 
\t transform: translateY(-5px); 
 
\t } 
 
} 
 
@-ms-keyframes bounce { 
 
\t 0%, 20%, 50%, 80%, 100% { 
 
\t -webkit-transform: translateY(0); 
 
\t -moz-transform: translateY(0); 
 
\t -ms-transform: translateY(0); 
 
\t -o-transform: translateY(0); 
 
\t transform: translateY(0); 
 
\t } 
 
\t 40% { 
 
\t -webkit-transform: translateY(-6px); 
 
\t -moz-transform: translateY(-6px); 
 
\t -ms-transform: translateY(-6px); 
 
\t -o-transform: translateY(-6px); 
 
\t transform: translateY(-6px); 
 
\t } 
 
\t 60% { 
 
\t -webkit-transform: translateY(-5px); 
 
\t -moz-transform: translateY(-5px); 
 
\t -ms-transform: translateY(-5px); 
 
\t -o-transform: translateY(-5px); 
 
\t transform: translateY(-5px); 
 
\t } 
 
} 
 
@keyframes bounce { 
 
\t 0%, 20%, 50%, 80%, 100% { 
 
\t -webkit-transform: translateY(0); 
 
\t -moz-transform: translateY(0); 
 
\t -ms-transform: translateY(0); 
 
\t -o-transform: translateY(0); 
 
\t transform: translateY(0); 
 
\t } 
 
\t 40% { 
 
\t -webkit-transform: translateY(-6px); 
 
\t -moz-transform: translateY(-6px); 
 
\t -ms-transform: translateY(-6px); 
 
\t -o-transform: translateY(-6px); 
 
\t transform: translateY(-6px); 
 
\t } 
 
\t 60% { 
 
\t -webkit-transform: translateY(-5px); 
 
\t -moz-transform: translateY(-5px); 
 
\t -ms-transform: translateY(-5px); 
 
\t -o-transform: translateY(-5px); 
 
\t transform: translateY(-5px); 
 
\t } 
 
}