CSS3转换不适用于Firefox，为什么？

你好，这里是我在的jsfiddle代码CSS3转换不适用于Firefox，为什么？

下面是简单的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。我尝试重新安排和谷歌搜索一些东西，但没有任何作品。

来源

2015-03-02 aceraven777

你检查了吗？ http://stackoverflow.com/questions/14713191/css-moz-keyframes-animation-not-working-on-firefox-18-0-1 – Kumar 2015-03-02 08:31:40

变化position:relative;到position:absolute;

工作小提琴 - >http://jsfiddle.net/qnbxaLwh/1/

您可以删除关键帧火狐，火狐不再使用了2年前。

来源

2015-03-02 08:22:29 Firuza

如果你需要使用相对位置，可以尝试使用一些工具，这样的 - >https://coveloping.com/tools/css-animation-generator

根据他们使用（工作跨浏览器），你用错了前缀为您的动画代码（-moz - 动画名称，例如...）

来源

2015-03-02 08:25:44 Nick

请更新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 } 
 
}

来源

2015-03-02 08:33:09 Kumar

CSS3转换不适用于Firefox，为什么？

回答

相关问题