以下代码在 Chrome 47 中不起作用,但在 Firefox 42 中可以正常工作:
@-webkit-keyframes hue {
from { -webkit-filter: hue-rotate(0deg); }
to { -webkit-filter: hue-rotate(-360deg); }
}
@-moz-keyframes hue {
from { -moz-filter: hue-rotate(0deg); }
to { -moz-filter: hue-rotate(-360deg); }
}
@-ms-keyframes hue {
from { -ms-filter: hue-rotate(0deg); }
to { -ms-filter: hue-rotate(-360deg); }
}
@-o-keyframes hue {
from { -o-filter: hue-rotate(0deg); }
to { -o-filter: hue-rotate(-360deg); }
}
@keyframes hue {
from { filter: hue-rotate(0deg); }
to { filter: hue-rotate(-360deg); }
}
.change-hue-animation {
-webkit-animation: hue 60s infinite linear;
-moz-animation: hue 60s infinite linear;
-ms-animation: hue 60s infinite linear;
-o-animation: hue 60s infinite linear;
animation: hue 60s infinite linear;
}
为什么?我做错了什么吗?
提前致谢。
最佳答案
您编写的大部分语法甚至都不存在。现在不推荐使用 -webkit-keyframes。使用它在所有浏览器上运行:
.change-hue-animation {
animation: hue 60s infinite linear;
-webkit-animation: hue 60s infinite linear;
}
@keyframes hue {
from { filter: hue-rotate(0deg); -webkit-filter: hue-rotate(0deg); }
to { filter: hue-rotate(-360deg);-webkit-filter: hue-rotate(-360deg); }
}
关于CSS3 动画在 Chrome 中不起作用,而在 Firefox 中起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34096618/