动画没有效果，不知道什么原因？

#music > img.play{

-webkit-animation: music_disc 4s linear infinite;

-moz-animation: music_disc 4s linear infinite;

-ms-animation: music_disc 4s linear infinite;

-o-animation: music_disc 4s linear infinite;

animation: music_disc 4s linear infinite;

}

@-webkit-keyframes music_disc{

%0{

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

transform: rotate(0deg);

}

%100{

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

transform: rotate(360deg);

}

}

@keyframes music_disc{

%0{

-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

transform: rotate(0deg);

}

%100{

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

transform: rotate(360deg);

}

}

html：

<div id="music">

<img src="img/music_pointer.png">

<img class="play" src="img/music_disc.png">

</div>