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;
}

以下部分在 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

修改第二个动画名称（不带前缀）。

之前

-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;
}

谢谢：）