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

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

Answer 3

请更新css

.arrow {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	padding-right:10px;
	bottom: 5%;
	left: 0;
	right: 0;
    top: 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);
	}
}