简单的CSS3动画不适用于火狐
简单的CSS3动画不适用于火狐
提问于 2014-08-08 07:41:18
我试着给一个div动画。实际上，我在动画中所做的是将div翻译成100%。但是动画只在chrome中工作，而在Firefox中却不起作用。我尝试添加前缀，还包括前缀-Free.js插件。Caniuse.com说火狐将支持没有前缀的动画。我也看到过很多类似的问题。但是他们中的大多数人使用的是Firefox和其他浏览器还不支持的属性。但我的很简单。我甚至尝试删除翻译和背景色的改变。但它也不起作用。
HTML：
<div class="container">
<div class="icon"></div>
</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js' ></script>CSS：
.container {
padding:3em;
}
.icon {
width: 100px;
height: 100px;
background-color: red;
animation: test 1s linear 0 infinite normal both;
}
@keyframes test {
0% {
transform: translateX(50%);
background-color: red;
}
100% {
transform: translateX(0%);
background-color: yellowgreen;
}
}演示
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-08-08 07:58:39
您的语法无效。您的零animation-delay需要一个单元，所以它应该是0s，而不是0
.icon {
width: 100px;
height: 100px;
background-color: red;
animation: test 1s linear 0s infinite normal both;
}无单位零只允许长度，不允许时间。有关解释，请参见这个答案 (问题是关于转换的，但也适用于动画)。
Stack Overflow用户
发布于 2014-08-08 07:54:35
将动画调用更改为这个，
.icon
{
animation: test 1s linear infinite;
}火狐似乎不懂一些短小的特性。
Stack Overflow用户
发布于 2014-08-08 07:56:30
像这样写你的代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.container {
padding:3em;
}
.icon, .icon:hover {
width: 100px;
height: 100px;
background: red;
-webkit-animation: test 2s linear infinite; /* Chrome, Safari, Opera */
animation:test 2s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes test {
from {background: red;}
to {background: yellow;}
}
/* Standard syntax */
@keyframes test {
from {background: red;}
to {background: yellow;}
}
</style>
</head>
<body>
<div class="container">
<div class="icon"></div>
</div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25198337
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号