CSS animation works on Safari and Firefox but not on Chrome

Question

The following code block runs the animation for 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;
}

The following part runs the animation on Safari browser but not on Chrome, all I get is a static picture corresponding to the upper code block.

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

Why won't the animation run on Chrome ?

Answer 1

modify second animation-name(without prefix).

Before

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

After

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

please notice difference in animation name.

also,
If you don't care about browser version(cross browser)
I would like to recommend for remove prefix.

Proposal

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

Thank you :)