Webkit关键帧在Chrome中不起作用 [英] Webkit keyframe not working in chrome

问题描述

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

Why is my keyframes animation (http://jsfiddle.net/ZcFre/) not working in Chrome?

我的CSS是：

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

推荐答案

您已经输入了分号在动画声明的最后一个花括号之后。

You've put a semicolon after the last curly brace of your animation declaration. Firefox accepted it, but Chrome didn't.

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

After fixing it, your animation spins again: http://jsfiddle.net/ZcFre/1/

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

这篇关于Webkit关键帧在Chrome中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！