Html 简单的CSS3动画在Firefox中不起作用
我正在尝试制作一个div的动画。我在动画中实际做的是将div转换为100%。但该动画仅在chrome中可用，在Firefox中不起作用。我尝试添加prefix，还包括prefix-free.js插件。Caniuse.com表示firefox将支持不带前缀的动画。我在堆栈溢出中看到了很多类似的问题。但他们中的大多数人都在使用Firefox和其他浏览器尚不支持的属性。但我的很简单。我甚至尝试删除翻译和背景颜色的变化。但它也不起作用 HTML:Html 简单的CSS3动画在Firefox中不起作用,html,css,css-animations,prefixfree,Html,Css,Css Animations,Prefixfree,我正在尝试制作一个div的动画。我在动画中实际做的是将div转换为100%。但该动画仅在chrome中可用，在Firefox中不起作用。我尝试添加prefix，还包括prefix-free.js插件。Caniuse.com表示firefox将支持不带前缀的动画。我在堆栈溢出中看到了很多类似的问题。但他们中的大多数人都在使用Firefox和其他浏览器尚不支持的属性。但我的很简单。我甚至尝试删除翻译和背景颜色的变化。但它也不起作用 HTML: 将动画调用更改为此 .icon { animat
将动画调用更改为此
.icon
{
animation: test 1s linear infinite;
}
firefox似乎不懂一些速记属性。这样编写代码
<!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>
您的语法无效。零动画延迟需要有一个单位，所以它应该是0，而不是0： 无单位零只允许用于长度，不允许用于时间。有关说明，请参见该问题与过渡有关，但它也适用于动画
.icon
{
animation: test 1s linear infinite;
}
<!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>
.icon {
width: 100px;
height: 100px;
background-color: red;
animation: test 1s linear 0s infinite normal both;
}