CSS 动画适用于 Safari 和 Firefox，但不适用于 Chrome

Question

以下代码块运行是 Firefox 的动画

#rocket {
    position: relative;
    top: 10px;
    -webkit-animation-name: rocketLaunch;
    animation-name: rocket-launch;
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -moz-animation-name: rocketLaunch;
    -ms-animation-name: rocketLaunch;
    -moz-animation-duration: 5s;
    -ms-animation-duration: 5s;
}

以下部分运行s 是 Safari 浏览器 上的动画，但 不是 Chrome，所有我得到的是上面代码块.

对应的静态图片

@-webkit-keyframes rocketLaunch {
    0% {
        top: 700px;
    }
    100% {
        top: 10px;
    }
}
@keyframes rocketLaunch {
    0% {
        top: 700px;
    }
    100% {
        top: 10px;
    }
}

为什么 Chrome 上的动画运行没有？

Answer 1

你把动画名字写错了试试这个代码。

#rocket {
    position: relative;
    top: 10px;
    width: 50px;
    height: 50px;
    background-color: #000;
    -webkit-animation-name: rocketLaunch;
    -moz-animation-name: rocketLaunch;
    -ms-animation-name: rocketLaunch;
    animation-name: rocketLaunch;
    -webkit-animation-duration: 5s;
    -moz-animation-duration: 5s;
    -ms-animation-duration: 5s;
    animation-duration: 5s;

}

Answer 2

修改第二个animation-name（不带前缀）。

之前

-webkit-animation-name: rocketLaunch;
        animation-name: rocket-launch;

之后

-webkit-animation-name: rocketLaunch;
        animation-name: rocketLaunch;

请注意动画名称的不同。

另外，
如果你不关心浏览器版本（跨浏览器）
我想推荐删除前缀。

提案

#rocket {
    position: relative;
    top: 10px;
    animation-name: rocketLaunch;
    animation-duration: 5s;
}

谢谢:)

CSS 动画适用于 Safari 和 Firefox，但不适用于 Chrome

CSS animation works on Safari and Firefox but not on Chrome

css

keyframe

google-chrome-extension

safari-extension

之前

之后

提案