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);
    }; <--Remove the semicolon
}