css - Webkit 关键帧在 Chrome 中不起作用

Question

为什么我的关键帧动画 ( http://jsfiddle.net/ZcFre/ ) 在 Chrome 中不起作用？

我的 CSS 是:

.circle1 {
    -webkit-animation: spinoffPulse 1s infinite linear;
}
@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    };
}

Answer 1

您在动画声明的最后一个大括号后面添加了分号。 Firefox 接受了它，但 Chrome 没有。

修复后，你的动画再次旋转:http://jsfiddle.net/ZcFre/1/

@-webkit-keyframes spinoffPulse {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }<b>; <--Remove the semicolon</b>
}