简单的CSS3动画在Firefox中不起作用
[英]Simple CSS3 animation is not working in Firefox
问题描述
我正在尝试对div进行动画处理。 我实际上在动画中所做的就是将div转换为100％。 但是该动画只能在chrome中使用，而不能在Firefox中使用。 我尝试添加前缀，并且我还包括prefix-free.js插件。 Caniuse.com说，Firefox将支持无前缀的动画。 我在堆栈中看到了很多类似的问题。 但大多数使用的是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 个解决方案
解决方案1
0 2014-08-08 07:54:35
将动画调用更改为此，
.icon
{
animation: test 1s linear infinite;
}
Firefox似乎不了解某些短手属性。
解决方案2
0 已采纳 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;
}
无单位零仅允许长度，而不是时间。 请参阅此答案以获取解释（问题与过渡有关，但也适用于动画）。
解决方案3
-3 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>
CSS3动画无法在Firefox上运行，但可以在chrome上运行
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.