-moz- -ms- -o-关键帧不起作用

Question

我的导航按钮上有一些关键帧动画，悬停时它应该会改变背景图像。

目前，只有Chrome正确设置按钮动画，但即使Chrome使用-webkit- safari也没有为它们设置动画。

注意：所有浏览器都是chrome，不要为任何背景更改关键帧动画制作动画。

#rain
{
    width: 700px;
    height: 300px;
    position: absolute;
    background: url('Images/Animation/RainDrop.png');
    -webkit-animation-name: rain;
    -webkit-animation-duration: 7s;
    -webkit-animation-delay: 9s;
    -moz-animation-name: rain;
    -moz-animation-duration: 7s;
    -moz-animation-delay: 9s;
    -ms-animation-name: rain;
    -ms-animation-duration: 7s;
    -ms-animation-delay: 9s;
    -o-animation-name: rain;
    -o-animation-duration: 7s;
    -o-animation-delay: 9s;
    animation-name: rain;
    animation-duration: 7s;
    animation-delay: 9s;
    opacity:0;
}

关键帧：

@-webkit-keyframes rain {
    0% {background-position: 0px 0px; opacity:0;}
    50%{opacity: 1;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px; opacity: 0;}
}

@-moz-keyframes rain {
    0% {background-position: 0px 0px; opacity:0;}
    50%{opacity: 1;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px; opacity: 0;}
}

@-ms-keyframes rain {
    0% {background-position: 0px 0px; opacity:0;}
    50%{opacity: 1;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px; opacity: 0;}
}

@-o-keyframes rain {
    0% {background-position: 0px 0px; opacity:0;}
    50%{opacity: 1;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px; opacity: 0;}
}

@keyframes rain {
    0% {background-position: 0px 0px; opacity:0;}
    50%{opacity: 1;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px; opacity: 0;}
}