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

时间：2015-03-02 08:17:11

标签： html css css3

嗨，这是我在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上工作。我尝试重新排列和谷歌搜索一些东西，但没有任何作用。

3 个答案:

答案 0 :(得分：2)

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

工作小提琴 - ＆gt; http://jsfiddle.net/qnbxaLwh/1/

  • 你可以删除firefox的关键帧，firefox在2年前不再使用了。

答案 1 :(得分：0)

如果你需要使用位置相对，请尝试使用这样的工具 - ＆gt; https://coveloping.com/tools/css-animation-generator

根据他们使用的代码（使用crossbrowser），你为你的动画使用了错误的前缀（-moz-animation-name，例如...）

答案 2 :(得分：0)

请更新css

＆＃13;
＆＃13; 
.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);
	}
}
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题