为什么我的CSS颜色转换在IE10中不起作用？

Question

这是我的代码：

/* Tile colour rotation */
/*tile 1 */
@-webkit-keyframes bwe1 {
0% {background-color: #39f;}
15% {background-color: #8bc5d1;}
30% {background-color: #f8cb4a;}
45% {background-color: #95b850;}
60% {background-color: #944893;}
75% {background-color: #c71f00;}
90% {background-color: #bdb280;}
100% {background-color: #39f;}
}
@-moz-keyframes bwe1 {
0% {background-color: #39f;}
15% {background-color: #8bc5d1;}
30% {background-color: #f8cb4a;}
45% {background-color: #95b850;}
60% {background-color: #944893;}
75% {background-color: #c71f00;}
90% {background-color: #bdb280;}
100% {background-color: #39f;}
}

/* Colour changing tiles */
.metro-layout .cycle1 {-webkit-animation: bwe1 20s infinite alternate linear;   -moz-animation: bwe1 20s infinite alternate linear; }

这些是我用来定义颜色旋转动画的两段代码，但它在IE10中不起作用。但它可以在Firefox，Safari和Chrome中使用......

请帮忙！

Answer 1

你还应该定义

-ms-animation: ...

和

@-ms-keyframes bwe1 { ... }

由于-webkit-和-moz-是供应商特定的前缀，而IE只是忽略这些前缀。

请注意，您还应为新版浏览器定义代码的无前缀版本（animation，@keyframes），例如最新的Firefox版本。