Question

以下代码在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;
}

为什么呢？我做错了吗？

提前致谢。

Answer 1

你写的大部分语法都不存在。而-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); }
}

演示：http://jsfiddle.net/790gzz83/4/

Answer 2

我相信您的动画不会在Chrome中触发，因为它选择了@keyframes hue而不是@-webkit-keyframes hue。在这种情况下，它不会到达-webkit-filter: hue-rotate，而是使用filter: hue-rotate中的@keyframes代替。

在@keyframes下，将filter更改为-webkit-filter将适用于Chrome：jsfiddle

您可以将过滤器合并为一个@keyframes，例如：

@keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
    filter: hue-rotate(-360deg);
  }
}

.change-hue-animation {
  animation: hue 10s infinite linear;
  -webkit-animation: hue 10s infinite linear; /* Android, Safari/Safari Mobile support */
}

在Firefox中工作时，CSS3动画在Chrome中不起作用

2 个答案: