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;

}