CSS3 转换在 Firefox 上不起作用，为什么? [英] CSS3 transform not working on Firefox, why?

问题描述

这是我在 JSFiddle 中的代码

Hi here's my code in 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 上不起作用.我尝试重新排列和谷歌搜索一些东西，但没有任何效果.

I've been trying for hours but I don't understand why it's not working on firefox. I tried rearranging and googling some stuffs but nothing works.

推荐答案

将 position:relative; 更改为 position:absolute;

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

• 您可以删除 firefox 的关键帧，firefox 在 2 年前不再使用.

这篇关于CSS3 转换在 Firefox 上不起作用，为什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！